在 Chrome 和 IE 中使用 CSS 悬停将鼠标悬停在图像上时，我遇到了显示隐藏图像的问题，但在 Firefox 中工作正常。 这是我的链接:https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php
这是我的代码:
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" />
</head>
<title>Elvie Loon</title>
<meta content="Professional Makeup Artist and Hair Stylist" name="description">
<style type="text/css">
.over .pic1 {
display:none;
visibility:hidden;
}
.over:hover .pic1 {
display:inline;
visibility:visible;
position:absolute;
top:250px;
left:100px;
z-index:11;
}
</style>
<body style="margin: 0px; width: 520px;">
<img src="landing-page.jpg" usemap ="#fly1map" />
<a class="over">
<map name="fly1map">
<area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href="">
</map>
<img src="pic-1.png" class="pic1">
</a>
</body>
</html>
请帮忙，谢谢。
最佳答案
试试这个而不是可见性......
#something:hover
{
opacity:1; //100% opacity
filter:alpha(opacity=100);
}
#something
{
opacity:0; //0% opacity
filter:alpha(opacity=0);
}
P.s 语句中的两行做同样的事情，底部过滤器，只是 IE 的做法。
关于Chrome 和 IE 中的 CSS 图片悬停问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7284888/