Question

我在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>

请帮助，谢谢。

Answer 1

而不是可见性试试这个......

#something:hover
{
    opacity:1; //100% opacity
    filter:alpha(opacity=100);
}

#something 
{
    opacity:0; //0% opacity
    filter:alpha(opacity=0);
}

P.s语句中的两行都做同样的事情，底部过滤器只是IE的做法。

Answer 2

问题是您不能将鼠标悬停在隐藏元素上（请参阅Why isn't CSS visibility working?）。

两个想法......

1。您可以使用两种图像的技术。除了图像，还要创建相同大小的透明图像。然后在鼠标悬停时将它们翻转。

<html>
<head>
</head>
<style type="text/css">
    .flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); } 
    .flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); } 
</style>


<body style="margin: 0px; width: 520px;">

    <div class="flipimage"></div>

</body>
</html>

2。此方法需要一些额外的标记，但实质上它会在图像上方放置<div>。当您将鼠标悬停在<div>上时，会使用z-index将其移到图片下方。

<html>
<head>
   <style type="text/css">
    .placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
    .placeholder:hover { z-index:-1; }
    .over { position:absolute; z-index:1;}
   </style>
</head>

<body style="margin: 0px; width: 520px;">

    <div>
        <div class="placeholder"></div>
        <a class="over"><img src="vcard.jpg" class="pic1"></a>
    </div>

</body>
</html>

Answer 3

Chrome和IE8存在一个已知的错误：与绝对定位元素上的悬停和z-index相关。

Chrome: Issue 83533

Chrome和IE中的CSS图像悬停问题

3 个答案: