mouseover透明div类显示图像

我被困在这个很长..希望有人可以帮助我，因为我不熟练使用Javascript。mouseover透明div类显示图像

的情况是这样的：

我使用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上时，我想要一个图像（320像素x 320像素）出现。

非常感谢！

来源

2012-09-24 Rui He Zhengrui

看看http://jquery.com/ –

你试图隐藏的div使用'visibility：hidden的;'而不是不透明的？ IE不支持不透明。 –

我已经试过..它不工作！ –

: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-24 11:13:27 David

嗨大卫，它似乎甚至没有出现，这里的链接来看看它。 http://mojogobbles.com.sg/cupcake-menu/ 我很困惑..你能告诉我那里有什么问题吗？ –

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

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

来源

2012-09-24 11:14:08 sandeep

是筛选条件：alpha（opacity = 0）;工作正常 –

我相信它的工作原理，但是我只是意识到div类没有出现在IE中，请查看http://mojogobbles.com.sg/cupcake-menu/ –

如果你想图像出现在第二个div outter＃F1 DIV试试这个

DEMO 1

或要显示的图像作为F1的div的背景图片试试这个

DEMO 2

来源

2012-09-24 16:45:21 Afshin

试试这个：每链接附加的缩略图，并使其disp已lay：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>

来源

2012-10-23 06:56:07 brightboy2004

mouseover透明div类显示图像

回答

相关问题