mouseover 透明 div 类显示图像答案

【问题标题】：mouseover transparent div class to display imagemouseover 透明 div 类显示图像
【发布时间】：2012-10-23 14:56:07
【问题描述】：

我在这个问题上停留了很长时间。希望有人可以帮助我解决这个问题，因为我不精通 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）。

非常感谢！

【问题讨论】：

看看jquery.com
你试过用visibility: hidden;而不是不透明度来隐藏div吗？ IE 不支持不透明度。
我试过了..还是不行！

标签： php javascript html css

【解决方案1】：

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

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

【讨论】：

我相信它有效，但是我刚刚意识到 div 类没有出现在 IE 中，请查看mojogobbles.com.sg/cupcake-menu

【解决方案2】：

: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); };

【讨论】：

嗨大卫，似乎连 div 都没有出现，这里是查看的链接。 mojogobbles.com.sg/cupcake-menu我很困惑..你能告诉我那里有什么问题吗？

【解决方案3】：

如果你想让图像出现在第二个 div 外 #f1 div 试试这个

DEMO 1

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

DEMO 2

【讨论】：

【解决方案4】：

试试这个：为每个链接附加一个缩略图并使其显示：无，然后通过 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>

【讨论】：