我需要在背景图像中单击一个区域以生成一个JavaScript使用的事件.所以,我创建了一个锚标签,在里面我插入了一些语义无意义的标签之间的相关文本然后我隐藏了:
<a href="#"><i>foo</i></a>
Run Code Online (Sandbox Code Playgroud)
然后我给了锚标签'display:block'属性,宽度和高度值,并且绝对定位在我需要它与背景图像相关的位置.在Firefox中这很好用 - 我将鼠标悬停在上面,我的光标按预期变化 - 我有点可点击的东西.但是,IE7不喜欢锚标记为"空"的事实,因此不会将其视为可点击.所以我把它添加到css中的锚标签:
background:url(/no-image.jpg);
Run Code Online (Sandbox Code Playgroud)
...这似乎愚弄IE7,假设有东西存在.IE7现在将该区域视为可点击,即使锚标签实际上不存在背景图像.但这对我来说似乎有些黑客,我想知道是否有一种更优雅的方式来解决这个问题.任何想法将不胜感激.谢谢.
html css internet-explorer cross-browser internet-explorer-7
我想要一个具有特定高度和宽度的锚.
它上面没有文字,因为它意味着要放在页面的某个区域之前.
这是代码:
<a href="/" style="width:370px;height:80px;display:block;position:absolute;"></a>
Run Code Online (Sandbox Code Playgroud)
除了IE6和IE7之外,它在所有方面都运行良好.如果我添加边框,我可以看到锚具有正确的大小,但如果我尝试单击它,则只有顶部可以单击.
我不知道为什么会这样做.我尝试添加一个onclick,即使有警报,同样的事情,单击锚的底部是不可能的.
这真的很奇怪,之前有没有发生过这种事?一切都会有所帮助.
我有一个图像可能有一些div(指定该图像中的某些选择).这些div应该是可点击的.像这样的东西:
#divOuter { width: 500px; height: 500px; border: 2px solid #0000FF; position: relative; }
#divInner { width: 100px; height: 100px; border: 2px solid #00FF00; position: absolute; cursor: pointer; top: 20px; left: 20px; }
<div id="divOuter">
<img src="SomeImage.jpg" />
<div id="divInner"></div>
</div>
$("#divOuter").click(function() { alert("divOuter"); });
$("#divInner").click(function() { alert("divInner"); });
Run Code Online (Sandbox Code Playgroud)
在chrome和FF中它按预期工作(指针出现在div上,点击它会提示"divInner"然后"divOuter").
然而,在IE8中它没有 - 我只有在悬停/点击内部div边界时才有相同的行为.在该div内部单击时,只有"divOuter"被警告.
怎么解决这个问题?