相关疑难解决方法(0)

今天早上我正在看NYTimes关于国家补贴的互动,并注意到即使一个国家被一个点遮挡,它也会在悬停时被提出.

例如,覆盖马萨诸塞州的点也部分覆盖了新罕布什尔州,但是当你进入新罕布什尔州的覆盖部分时,新罕布什尔州就会被提出来.

你觉得他们怎么做到这一点？点基于它们在DOM中的顺序位于状态轮廓的前面.我认为在所有事情的基础上可能会有第二组状态轮廓,听取会触发底层形状的鼠标悬停,但事实似乎并非如此.

我需要在我正在处理的应用程序中实现类似的功能,并对使用SVG元素的优雅方式感到好奇.

谢谢.

我的问题是我有这个盒子又称容器.在该容器内部,有用户可以单击的框.

为了在视觉上帮助用户,我制作了一个灰色褪色的覆盖盒,告诉他们可以在这里使用这些盒子.

但我的问题是,点击事件位于覆盖框后面的框上.

那么有没有办法忽略一个元素.click()并使用下一个目标？

我有一个绝对定位div的点击问题.我正在开发一个带有jquery scrollpath的网站,并添加额外的图层以获得主要层中的视差效果和顶层覆盖按钮,它们无法点击,悬停等等.

这是一个简单的例子:

<div class="body">
<div class="a"></div>
<div class="b">
    <div class="element first">First</div>
    <div class="element second">Second</div>
</div>
</div>

.body {
    position relative;
}
.a {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 300px;
    height: 600px;
    background: rgba(0,0,0,0.5);
    z-index: 2;
}
.b {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 260px;
    height: 300px;
    background: blue;
    z-index: 1;
}
.b .element {
    position: absolute;
    width: 50px;
    height: 50px;
    background: red;
}
.b .element.first {
    top: 50px;
    left: 50px;
}
.b .element.second { …

我正在尝试禁用SharePoint 2013列表编辑页面中的超链接.我使用了内容编辑器webpart并将其放入pointer-events : none.它在Google Chrome上运行正常,但在IE中无效.有没有替代方案？我只想要CSS替代品.我的IE是版本10.

我有一个链接,由于几个原因,我通过在它上面显示透明div来禁用.这适用于FF和Chrome就好了,但在IE上链接仍然是可点击的.如果我向div添加背景颜色(透明除外),则该链接不应该是可点击的.

关于如何实现这一点的任何想法？

这是一个例子:http://jsfiddle.net/GdEak/7/

<div id=container>
    <div class='disabled'></div>
    <a href="#">Some link</a>
</div>

CSS:

#container{
  position:relative;
}
.disabled{
  width:200px;
  height:30px;
  position:absolute;
  top:0;
  left:0;
}
a{
  display:inline-block;
  width:200px;
  height:30px;
}

谢谢!

我有几个聊天框和其他div元素需要定位在屏幕的底部,与右边对齐.

问题#1:元素的高度不同,较小的元素与最高元素的顶部垂直对齐.小提琴:http://jsfiddle.net/sd69jdxp/

#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; float: right; position: relative; margin: 0 5px; }

问题#2:使用方法

display:inline-block; vertical-align:bottom;

要将div对齐到页面底部,第一个(最小的)聊天框上的链接(锚点)不可单击,因为父容器与链接重叠.并且不可能为聊天容器设置较低的z-index而不是后面的内容,因为聊天框是聊天容器的子项,并且它们必须具有比页面内容更高的z-index.如何解决这个问题？小提琴显示此问题:http://jsfiddle.net/xw689yv8/

总结 如何强制所有div与屏幕右下角对齐,而不会让聊天容器(聊天框的父div)与聊天框后面页面中的内容重叠,从而使其无法点击？

我需要这个小提琴解决了.

我无法与另一个具有背景的HTML元素下的DOM元素进行交互.这是HTML/CSS 101.但是,将背景与rgba和opacity CSS属性结合使用时,这并不总是理想的效果.就像我的情况一样,我需要元素的背景始终位于所有其他元素之上.

说实话,我不知道从哪里开始解决这种情况.我希望有一个CSS解决方案,允许通过具有背景的元素传播事件.我怀疑存在.

我的另一个想法是使用JavaScript解决方案以某种方式强制捕获事件到下面的元素,就好像顶部的元素甚至不存在一样.

如何在具有背景的HTML元素下与DOM元素进行交互？

请注意,我需要在所有现代浏览器中使用它.

我有一个元素网格，上面有一个 h1 文本标签。每个网格元素都有一个悬停操作，我想为文本下方的网格元素激活该悬停操作。但是，我不能将网格元素的 z 索引设置得更高，因为这会使文本变得模糊。

html 的基本思想：（这是一个实际上有用的 JSFiddle 链接：http://jsfiddle.net/evd3v/）

<div id="background" class="header">
</div>
<div id="overlay">
    <table>...</table>  <!-- A grid that covers the background image -->
</div>
<h1 id="title" class="title">My Page Title</h1>
<h2 id="detail" class="title">Designed by Me</h2>

我在包装div中有2个div，我想知道是否可以将#wrapper div放在内容的顶部（#outer和#inner）。

    <div id="wrapper">
       <div id="outer">
          <div id="inner"></div>
       </div>
    </div>

我希望#wrapper添加透明背景而不对HTML进行任何更改。我尝试使用z-index这样做没有成功。

看到这个小提琴：http : //jsfiddle.net/nPpDE/

任何帮助深表感谢。

我可以给出一个例子:

.nightly{
  z-index: 9000; 
  position: fixed; 
  height: 100%; 
  width: 100%; 
  background-color: rgba(0,0,0,0.5);
}

<div class="nightly">
</div>

<div class="body">
  <button>Test</button>
  <a href="#">Test 1</a>
</div>

想知道div.nightly点击的"透明" 怎么样,或者可以点击下面的按钮,链接等？