Question

好吧这可能听起来像一个完整的菜鸟问题，但我很想知道。

是否可以使用CSS来执行我要求的操作？下面列出的链接和代码，当你将鼠标悬停在菜单按钮上时，它会显示在你的菜单按钮点亮的地方，我怎么想知道是否可以用一个装满内容的容器做同样的效果..

http://71012.site90.net/

<!DOCTYPE html>
<html>
<head>
<style>
body{ background:#000; margin:0px; }
div#menubar1{ padding: 24px; border:#999 1px dashed; }
div#menubar1 > a{
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
background: #333;
padding: 12px 24px;
color:#999;
margin-right: 10px;
text-decoration:none;
border-radius: 3px;
-webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
div#menubar1 > a:hover{
background: #6F8A00;
color:#FFF;
}
</style>
</head>
<body>
<div id="menubar1">
  <a href="#">Example</a><a href="#">Example</a><a href="#">Example</a><a     href="#">Example</a><a href="#">Example</a>
</div>
</body>
</html>

再一次，对不起，如果这是一个完整的菜鸟问题，我真的很感兴趣，因为我喜欢这种效果的样子。

Answer 1

您可以简单地使用一个类作为效果，然后将该类分配给您想要的任何对象：

.hover-effect:hover {
    background: blue;
}

你的HTML：

<a href="#" class="hover-effect">Hover</a>
<div class="hover-effect">Same hover effect applied here</div>

Answer 2

如果您正在寻找一个与兄弟姐妹相对的徘徊容器，您可以使用儿童选择器（>，*和＆amp; ）并应用父母{/ 1}}

如果您希望影响以下兄弟姐妹，您可以使用兄弟选择器（:hover＆amp; +）并将：hover应用于先于其他兄弟姐妹的兄弟姐妹

最后一个选项是像Chris建议的那样，将相同的悬停事件应用于类或类型的所有元素，但这只影响同一类类型的元素

有关CSS选择器的更多信息和见解，this is a GREAT article

CSS动画菜单按钮+容器？

2 个答案: