Question

我被困在这很长时间...希望有人可以帮助我，因为我不精通Javascript。

情景如下：

我正在使用wordpress，在一个页面中，我有一张带有纸杯蛋糕的大图片（800px X 1200px）。

我希望实现的效果是这样的;当用户将鼠标悬停在特定的蛋糕上（带有一层透明div）时，将出现一个图像（320px x 320px）。

我尝试使用css：hover，它适用于safari，chrome和firefox。但对IE来说，它不起作用。因此，我正在考虑使用javascript来操作div类而不是 onmouseover 和 onmouseout 事件

PHP / HTML：

<div id="f1"></div>

CSS：

#f1{
width: 100px;
height: 50px;
left: 370px;
top: 450px;
position: absolute;
opacity:0;
}

因此，当用户将鼠标悬停在透明div上时，我想要显示一个图像（320px x 320px）。

非常感谢！

Answer 1

您可以使用IE过滤器。写得像这样：

#f1{
width: 100px;
height: 50px;
left: 370px;
top: 450px;
position: absolute;
opacity:0;
filter: alpha(opacity=0);
}

Answer 2

IE7 +支持

:hover，但可能还有其他问题有问题或不受支持，例如opacity或hasLayout问题。

你可以这样做是javascript：

var div = document.getElementById('f1');
div.onmouseover = function() {
    div.className += ' hover';
};
div.onmouseout = function() {
    div.className = div.className.replace(/\shover/,'');
}

或jQuery：

$('#f1').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

当moused结束时，它会向元素添加一个hover类，以便你可以设置样式，f.ex：

#f1.hover{ background:url(path/to/img.jpg); };

Answer 3

如果你想让图像出现在第二个div outter＃f1 div中试试这个

DEMO 1

或者你想将图像显示为f1 div的背景图像试试这个

DEMO 2

Answer 4

试试这个：在每个链接上附上一个缩略图，然后显示：none，然后通过jQuery .hover（）使其显示和隐藏。

<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
    .lsr { 
        width: 10px; 
        height: 10px;
        background-color: #000; 
    }

    #lsr {
        display: none;
    } 
}

  </style>

</head>
<body>
 <div class="lsr" id="img1"><a href="#"><img src="http://pbskids.org/itsmylife/images/teststress1.gif" alt="img" ></a></div>

<div id="lsr"> 
    <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" id="img1" >
</div>
<script>
   $("div.lsr a").hover(
        function() { $("#lsr").show(); },
        function() { $("#lsr").hide(); }
    );
</script>

</body>
</html>

mouseover透明div类来显示图像

4 个答案: