开发者

How to set opacity IE? issue with mouse over

When开发者_JAVA百科 I am trying to set opacity in css, mouse over event is not getting fired. my css code is-

.dropmenudiv_a{
    position:absolute;
    top: 0;
    border: 1px solid white; /*THEME CHANGE HERE*/
    border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline      above*/
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    font:normal 12px Arial;
    line-height:18px;
    z-index:100;
    background-color: lightgray;
    width: 200px;
    visibility: hidden;
    opacity:0.9;
    filter: alpha(opacity = 50); // for IE
}   

.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
    background:url(media/menuover.jpg) repeat-x top;
    color: white;
}

background image on mouse over is getting changed in MOZILA but not in IE?When I remove filter: alpha(opacity = 50);, it is workin fine in IE also but then opacity is not coming in IE......????


For IE you have to remove/reset the filter style, like this:

.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
  filter: none; /* resets the filter */
  background:url(media/menuover.jpg) repeat-x top;
  color: white;
}

Tried it in IE8 (Windows 7) with success.


What you're probably seeing is the IE bug where links within a container that has a filter applied become unclickable and unfocusable.

A fix that sometimes works is to add a z-index to your links:

.dropmenudiv_a a { 
    position: relative;
    z-index: 1;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜