Question

我有一个翻转图像，目标是当用户将鼠标悬停在图像上时，它会变暗（我使用翻转图像实现），并且两个链接显示为标题为“＃34;了解更多＆＃34;和＃34;访问网站＆＃34; （它们应该出现在图像上）。在我进入造型之前，我想确保一切正常，我的问题是这些链接似乎根本没有出现。我错误的是，我应该确定能够在图像被鼠标悬停时看到链接吗？

问题所在的网站是here，您可以查看是否将鼠标悬停在其中一个图片上，以显示该链接的显示方式。我的代码如下。

HTML

<div id="example1" class="good_example"><a onMouseOut="MM_swapImgRestore()"  onMouseOver="MM_swapImage('ABC','','images/examples/abc_website_over.png',1)"><img  src="images/examples/abc_website_desat.png" alt="visit site" width="300" height="200"  id="ABC"></a>
<div class="options">
<a href="http://www.example.com">Learn More</a><a href="#good_examples" id="click-me1">Visit Site</a>
</div></div>

CSS

#example1:hover.options {
visibility:visible;
}

.options {
visibility:hidden;  
position:absolute;
z-index:9999999;
top:50px;
left:75px;
}

.options a:link {
padding-right:15px; 
padding-left:15px;
padding-top:10px;
padding-bottom:10px;
margin:10px;
color:#ffffff;
font-size:40px;

border-radius:10px;

-webkit-border-radius:10px;

-moz-border-radius:10px;
width:50px; 
text-align:center;
opacity:0.7;
background-color:#069;
}

.options a:hover {
opacity:1;  
}

Answer 1

您的css选择器

存在问题

#example1:hover.options {
visibility:visible;
}

将选择器替换为以下内容：

#example1:hover > .options {
    visibility:visible;
}

这应该有用。

here's a quick sample

Answer 2

你有.options {visibility：hidden;}所以无论内容是什么，它都是看不见的。你应该至少在.options：hover。

时将其更改为可见

鼠标悬停时未出现在图像上的链接

2 个答案: