Question

我需要在鼠标悬停时显示并覆盖另一个图像，这是一种菜单。这适用于chrome和firefox。任何的想法？来了

<div id="button1OverStyle" class="buttonOverStyle" onclick="changeFrame('main/main.html')" >
<img id="button1OverStyleImage" src="images/button_home.png" height="24" width="46" />

<script>      
  $('#button1OverStyle').hover(function(e) {
    showTittle('button1OverStyleImage');  });
  $('#button1OverStyle').mouseleave(function(e) {
    hideTittle('button1OverStyleImage');});
  $('#button2OverStyle').mouseover(function(e) {
    showTittle('button2OverStyleImage'); });
  $('#button2OverStyle').mouseleave(function(e) {
    hideTittle('button2OverStyleImage'); });      
</script>

我找到了哪里找到它。这就是问题

在这一行

<div id="button1OverStyle" class="buttonOverStyle" onclick="changeFrame('main/main.html')" >
            <img id="button1OverStyleImage" src="images/button_home.png" height="24" width="46" />
        </div>

这是CSS

.buttonOverStyle{   position:absolute;  cursor:pointer;     z-index:1000;   height:24px;}  .buttonOverStyle img {   display:none;}

问题在于，如果图像未显示，则Internet Explorer无法识别div，因此无法进行“mouseenter”或“mouseover”。

任何想法??????

Answer 1

尝试mouseenter：

mouseenter JavaScript事件是Internet Explorer专有的。由于事件的一般实用程序，jQuery模拟了这个事件无论浏览器如何都可以使用它。此事件发送给鼠标指针进入元素时的元素。任何HTML元素可以收到这个活动。

<强> HTML

<div>test</div>

<强>的jQuery

$("div").mouseenter(function(){
    $(this).css("color", "red");
});
$("div").mouseleave(function(){
    $(this).css("color", "blue");
});

<强> EXAMPLE

您也可以尝试.hover()

Answer 2

的解决方案！

我在Css中使用不透明度

.buttonOverStyle img {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
opacity: .1;}


.buttonOverStyle img:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: .9;}

这对我有用

Jquery Mouseover无法使用IE

2 个答案: