Chrome 和 IE 中 CSS 图像悬停问题

发布于 2024-12-02 13:40:17 字数 1109 浏览 0 评论 0原文

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

请帮忙，谢谢。

原文

I have problem of display an hidden image when mouse over to an image by using CSS hover in Chrome and IE, but is working fine in Firefox.
Here is my link: https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php

Here is my coding:

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

Please help, thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

探春 2024-12-09 13:40:17

不用可见性，试试这个...

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

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

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

Instead of visibility try this...

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

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

P.s Both lines inside the statement do the same thing, the bottom filter, is just IE's way of doing it.

回复收藏 0 原文

空气里的味道 2024-12-09 13:40:17

问题是您无法将鼠标悬停在隐藏元素上（请参阅为什么 CSS 可见性不起作用？）。

两个想法...

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. 这种方法需要一些额外的标记，但本质上它会在图像上方放置一个

。当您将鼠标悬停在

上时，它会使用 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>

The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).

Two ideas...

1. You could use a technique with two images. In addition to your image, create a transparent image of the same size. Then flip them on the mouse hover.

<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. This approach takes some additional markup, but essentially it places a <div> above the image. When you hover over the <div> it is moved below the image using the 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>

回复收藏 0 原文