gpt4 book ai didi

CSS :hover to affect 2 elements

转载 作者:行者123 更新时间:2023-12-04 22:29:40 31 4
gpt4 key购买 nike

所以我有一些 CSS 生成这个。

CSS Menu

HTML代码如下。

<div class="menu">
<ul>
<li><a href='index.html'>Home</a></li>
<div class="menutab"></div>
<li><a href='about_us.html'>About Us</a></li>
<div class="menutab"></div>
<li><a href='#'>Order Online</a></li>
<div class="menutab"></div>
<li><a href='gallery.html'>Gallery</a></li>
<div class="menutab"></div>
<li><a href='#'>Contact Us</a></li>
<div class="menutab"></div>
</ul>
</div>

和 CSS

.menu {
width: 100%;
height: 220px;
float: left;
margin-left: -20px;
position: relative;
text-align: center;
}

.menu li{
display: block;
list-style: none;
width: 100%;
background: #EBE5D9;
height: 50px;
margin-left: -40px;
margin-top: 5px;
line-height: 50px;
}

.menu li:hover {
background: #AEC32A;
}


.menu li a{
text-decoration: none;
font-size: 20px;
color: #000000;
font-family: fantasy;
}



.menutab {
width: 30px;
position: relative;
margin-top: -3px;
margin-left: -71px;
border-right: 21px solid #EBE5D9;
border-bottom: 21px solid transparent;
}

基本上我想要的是悬停效果将整个东西变成绿色,目前 .menu li:hover 将 block 变成颜色 #AEC32A 但我也希望它把 .menutab 边框变成相同的颜色,无论如何做这个?最好不使用 Javascript。

预先感谢您的帮助:-)

最佳答案

试试相邻的选择器。

.menu li:hover+.menutab {
border-right-color: #AEC32A;
}

JS Bin Demo

关于CSS :hover to affect 2 elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14940158/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com