1

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

场景是这样的:

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

我希望达到的效果是这样的;当用户将鼠标悬停在特定的纸杯蛋糕上(带有一层透明 div)时,会出现一个图像(320px x 320px)。

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

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+ 中受支持,但可能存在其他问题或不支持的问题,例如opacityhasLayout问题。

你可以这样做是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 回答