[英]Targeting an element by hovering another element in CSS
How can I target one element on hover and then effect an other element? 如何将一个元素放在悬停上,然后影响另一个元素?
Here's the HTML: 这是HTML:
<header>
<h1 style="float: left; margin-top: 2%;"> Naughty Mama.</h1>
<nav>
<ul>
<li><a href="profile.php">My Profile</a></li>
<li><a href="inbox.php">Inbox</a></li>
<li><a href="notifications.php">Notifications</a></li>
</ul>
</nav>
</header>
Here's the CSS: 这是CSS:
@CHARSET "ISO-8859-1";
header {
background-color: #ddd;
}
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul li{
display: inline;
padding: 15px;
background-color: #eee;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
color: #000;
}
I want to effect the nav ul li
when I hover on nav ul li a
. 我想以实现nav ul li
,当我悬停在nav ul li a
。
Hope I am clear. 希望我清楚。
You may style <a>
so it covers <li>
. 您可以设置<a>
样式,使其涵盖<li>
。 apply hover effect as background to <a>
:) http://codepen.io/anon/pen/zyDLA 将悬停效果用作<a>
背景:) http://codepen.io/anon/pen/zyDLA
header {
background-color: #ddd;
}
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul li{
display: inline-block;
background-color: #eee;
vertical-align:top;
}
nav ul li a {
color: #fff;
text-decoration: none;
display:block;
padding:15px;
}
nav ul li a:hover {
color: #000;
background:#48a
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.