IE проблема: прозрачный div над изображением не вызывает CSS: hover - PullRequest
Новая
       24

IE проблема: прозрачный div над изображением не вызывает CSS: hover

3 голосов
/ 22 сентября 2010

Вот проблема: я хочу создать реактивные зоны на изображении, используя прозрачный 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>

Спасибо за вашу помощь!

Ура!

Ответы [ 4 ]

7 голосов
/ 18 июля 2011

У меня была именно эта проблема, и я исправил ее следующим образом: 

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

где spacer.gif - это прозрачный GIF размером 1 пиксель.

надеюсь, это поможет.

2 голосов
/ 22 сентября 2010

пользовательский фильтр для т.е. 

   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 */
1 голос
/ 07 мая 2013

У меня была такая же проблема, и мое решение состояло в том, чтобы заставить элемент иметь «реальный» цвет фона, но иметь нулевую непрозрачность.К сожалению, не существует «хорошего» кросс-браузерного способа сделать это, но так как мне понадобилось, чтобы элемент был частично прозрачным при наведении, это было не 1002 * де-факто , поэтому это решение хорошо работало длямне.Возможно, это не подходит вам, но, возможно, это поможет другим, поэтому я все равно опубликую это. 

.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 голосов
/ 22 сентября 2010

Поместите «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>
...