Ie Problem : Transparent Div Above A Picture Doesn't Trigger The Css:hover

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 d

Solution 1:

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

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

where spacer.gif is a 1px transparent gif.

hope this helps.

Solution 2:

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 */

Solution 3:

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;
}

Solution 4:

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

<styletype='text/css'>#hover_zone{
    position:absolute;
    display:block;
    width:40px;
    height:40px;
    left:10px;
    top:10px;
}
a:hover#hover_zone{
    background-color:#0C0;
}

</style><divid="container"><ahref="#"><spanid="hover_zone"></span><imgsrc="http://revaxarts.com/portfoliodata/fotobox/screenshot.jpg" /></a></div>