IE 问题：图片上方的透明 div 不会触发 CSS:hover

发布于 2024-09-25 03:31:19 字数 772 浏览 3 评论 0原文

问题是：我想使用透明 div 在图像上创建反应区域，但以下代码在 IE 上不起作用（在 Chrome 上测试）：div“hover_zone”的背景颜色根本没有改变。

问题是由于背景颜色设置为透明造成的。使用任何有效的颜色，如#FFF，它就可以工作（IE 似乎认为：它是透明的，它不包含任何内容，我们不显示它）。

<html>
<body>

<style type='text/css'>

#hover_zone{
    background-color:transparent;
    visibility: visible;
    position:absolute;
    width:40px;
    height:40px;
    left:10px;
    top:10px;
    z-index:1000;
}

a:hover #hover_zone{
    background-color:#0C0;
    visibility: visible;
}

</style> 

<div id="container">
  <img src="http://ptaff.ca/blogue/wp-content/uploads/noir_black.png" />
  <a href="#"><div id="hover_zone"></div></a>
</div>

</body>
</html>

感谢您的帮助！

干杯!

原文

Here is the problem : I want to create reactive zones on a image using transparent div, but the following code doesn't work on IE (tested on Chrome) : the background-color of the div "hover_zone" doesn't change at all.

The problem is due to the background-color set to transparent. Use any valid color like #FFF and it works (it seems IE thinks like: it's transparent, it doesn't contain anything, let's not display it).

<html>
<body>

<style type='text/css'>

#hover_zone{
    background-color:transparent;
    visibility: visible;
    position:absolute;
    width:40px;
    height:40px;
    left:10px;
    top:10px;
    z-index:1000;
}

a:hover #hover_zone{
    background-color:#0C0;
    visibility: visible;
}

</style> 

<div id="container">
  <img src="http://ptaff.ca/blogue/wp-content/uploads/noir_black.png" />
  <a href="#"><div id="hover_zone"></div></a>
</div>

</body>
</html>

Thanks for your help!

Cheers!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城缀染半城烟沙 2024-10-02 03:31:19

我遇到了这个问题，并用这种风格修复了它：

div#hover-zone { background:transparent url('../images/spacer.gif') 0 0 repeat; }

其中 spacer.gif 是 1px 透明 gif。

希望这有帮助。

I had this exact problem and fixed it with this style:

div#hover-zone { background:transparent url('../images/spacer.gif') 0 0 repeat; }

where spacer.gif is a 1px transparent gif.

hope this helps.

回复收藏 0 原文

我喜欢麦丽素 2024-10-02 03:31:19

ie的用户过滤器

   background-color: #ffffff;  /* the background          */
   filter:alpha(opacity=50);   /* Internet Explorer       */
   -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
   opacity: 0.5;               /* newer browser and CSS-3 */

user filter for ie

   background-color: #ffffff;  /* the background          */
   filter:alpha(opacity=50);   /* Internet Explorer       */
   -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
   opacity: 0.5;               /* newer browser and CSS-3 */

回复收藏 0 原文

以为你会在 2024-10-02 03:31:19

我遇到了同样的问题，我的解决方案是使元素具有“真实”背景颜色，但不透明度为零。不幸的是，没有“好的”跨浏览器方法来实现这一点，但由于我碰巧需要元素在悬停时部分透明，所以这实际上不是问题，所以这个解决方案效果很好为我。它可能不适合您，但也许对其他人有帮助，所以我无论如何都会发布它。

.hotspot
{
    background-color: #FFFFFF; /* will be visible upon hover */

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    -moz-opacity: 0; /* Netscape */
    -khtml-opacity: 0; /* Safari 1.x */

    opacity: 0;
}
.hotspot:hover
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */
    filter: alpha(opacity=70); /* IE 5-7 */
    -moz-opacity: 0.7; /* Netscape */
    -khtml-opacity: 0.7; /* Safari 1.x */

    opacity: 0.7;
}

I had this same problem, and my solution was to make the element have a "real" background color, but have zero opacity. Unfortunately, there is no "good" crossbrowser way to make that happen, but since I happened to need the element be partially transparent on hover, that was a de facto non-issue, so this solution worked well for me. It may not be right for you, but perhaps it will help others so I'll post it anyway.

.hotspot
{
    background-color: #FFFFFF; /* will be visible upon hover */

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    -moz-opacity: 0; /* Netscape */
    -khtml-opacity: 0; /* Safari 1.x */

    opacity: 0;
}
.hotspot:hover
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */
    filter: alpha(opacity=70); /* IE 5-7 */
    -moz-opacity: 0.7; /* Netscape */
    -khtml-opacity: 0.7; /* Safari 1.x */

    opacity: 0.7;
}

回复收藏 0 原文

画尸师 2024-10-02 03:31:19

将“img”放入“a”内，并使用“span”作为“div”（内联中不允许使用块元素）

<style type='text/css'>

#hover_zone{
    position:absolute;
    display:block;
    width:40px;
    height:40px;
    left:10px;
    top:10px;
}
a:hover #hover_zone{
    background-color:#0C0;
}

</style> 

<div id="container">

  <a href="#"><span id="hover_zone"></span><img src="http://revaxarts.com/portfoliodata/fotobox/screenshot.jpg" /></a>
</div>

Put the 'img' inside the 'a' and use 'span' for the 'div' (blockelement not allowed in inline)

<style type='text/css'>

#hover_zone{
    position:absolute;
    display:block;
    width:40px;
    height:40px;
    left:10px;
    top:10px;
}
a:hover #hover_zone{
    background-color:#0C0;
}

</style> 

<div id="container">

  <a href="#"><span id="hover_zone"></span><img src="http://revaxarts.com/portfoliodata/fotobox/screenshot.jpg" /></a>
</div>

回复收藏 0 原文

~没有更多了~