我的问题是一个我确定会很常见的问题，但尽我最大的努力，我根本找不到任何关于这个的教程。
我想为网站构建文本和图像导航菜单。在我看来，很多人都想做这样的事情，但要么我完全错过了一个简单的概念，要么很多人不想做这样的事情。
我的确切目标:创建一个顶部有图片、底部有 CSS 样式文本的导航菜单。当您将焦点或悬停在图片上时，图像会发生变化并且文本会发生变化，就好像它们是一个元素一样。
我的问题:在我的按钮上，如果将鼠标悬停在文本上，图像和文本会发生变化。如果将鼠标悬停在图像上，只有图像会发生变化，就好像它们是两个独立的实体一样。
我的 HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>
<ul>
<li id="onlineRugStore"><a href="#"id="test"><b>Button</b></a></li>
</ul>
CSS:
body{
background-color:#e8f1c4;
}
#onlineRugStore a{
display:block;
width:191px;
height:107px;
background:url('bestimages/test/worktest.gif') 0 0;
}
#onlineRugStore a:hover{
background:url('bestimages/test/worktest.gif') 0 -107px;
}
#test b{
position:absolute;
text-align:center;
margin:110px 0 0 0;
font-size:18px;
color:white;
text-decoration:none;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
width:191px;
height:24px;
background-color:#cc7bd6;
opacity:0.45;
filter:alpha(opacity=45);
padding:4px 0 0 0;
}
#test b:hover{
opacity:1.0;
}
ul{
list-style-type:none;
}
可以在以下位置查看我正在谈论的示例:http://kokorugs.com/test2.php
用尽所有努力后，我认为这可能是不可能的，然后我在以下网站上找到了一个工作示例:http://www.amazeelabs.com/en (注意导航菜单)。
感谢所有帮助。
节日快乐， 拉斐尔
最佳答案
我已经为你创建了一个 JSfiddle:http://jsfiddle.net/drXng/
您在 CSS 中看到的代码应该清楚地解释了发生了什么。
/*CSS you want to apply to the element wrapping both the text and picture*/
.both {
opacity: 0.5;
width: 200px;
height: 200px;
display: block;
}
/*CSS you want to apply to the text only before it is hovered*/
.text {
background-color: green;
}
/*CSS you want to apply to the picture only before it is hovered*/
.picture {
width: 50px;
height: 50px;
}
/*CSS you want to apply to the element wrapping both both the text and picture after hovered*/
.both:hover {
opacity: 1;
}
/*CSS you want to apply to text when both are hovered*/
.both:hover .text {
background-color: blue;
}
/*CSS you want to apply to picture when both are hovered*/
.both:hover .picture {
background-color: red;
}
在您的情况下，可以通过将 .both 更改为 ul 轻松完成。例如，只要鼠标悬停在 ul 中的任何内容，以下 CSS 就会更改 #test b 的不透明度。
ul:hover #test b{
opacity:1.0;
}
附言作为忠告，请尝试avoid using ID selectors in CSS如果可以的话。 :)
关于css - 可查看的文本和图像网站导航菜单 - CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13944232/