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

沃梦达教程前端问题

2022-01-01

IE Problem : Transparent div above a picture doesn#39;t trigger the CSS:hover(IE 问题:图片上方的透明 div 不会触发 CSS:hover)

本文介绍了IE 问题:图片上方的透明 div 不会触发 CSS:hover的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问题是:我想使用透明 div 在图像上创建反应区域，但以下代码在 IE 上不起作用(在 Chrome 上测试):divhover_zone"的背景颜色不起作用完全改变.

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.

问题是由于背景颜色设置为透明.使用任何有效的颜色，如#FFF，它就可以工作(似乎 IE 认为:它是透明的，它不包含任何东西，我们不要显示它).

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>

感谢您的帮助！

干杯！

推荐答案

我遇到了这个确切的问题并用这种样式修复了它:

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

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

其中 spacer.gif 是一个 1px 的透明 gif.

where spacer.gif is a 1px transparent gif.

希望这会有所帮助.

这篇关于IE 问题:图片上方的透明 div 不会触发 CSS:hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

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

上一篇：在 HTML 中，如何在将鼠标悬停在文本上时显示图像?

下一篇： Rails 中的 HTML 标题属性仅显示第一个单词

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX