1

我在这个问题上停留了很长时间..希望有人可以帮助我，因为我不精通 Javascript。

场景是这样的：

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

我希望达到的效果是这样的；当用户将鼠标悬停在特定的纸杯蛋糕上（带有一层透明 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）。

非常感谢！

4

4 回答 4

2

因为您可以为此使用 IE 过滤器。像这样写：

#f1{
width: 100px;
height: 50px;
left: 370px;
top: 450px;
position: absolute;
opacity:0;
filter: alpha(opacity=0);
}
于 2012-09-24T11:14:08.123 回答
0

如果您希望图像出现在第二个 div 外部 #f1 div 试试这个

演示 1

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

演示 2

于 2012-09-24T16:45:21.223 回答
0

试试这个：为每个链接附加一个缩略图并使其显示：无，然后通过 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>
于 2012-10-23T06:56:07.350 回答
0

:hover在 IE7+ 中受支持，但可能存在其他问题或不支持的问题，例如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');
});

当鼠标悬停时，它将为元素添加一个hover类，以便您可以设置它的样式，f.ex：

#f1.hover{ background:url(path/to/img.jpg); };
于 2012-09-24T11:13:27.000 回答