悬停改变颜色
Posted
技术标签:
【中文标题】悬停改变颜色【英文标题】：on hover change color 【发布时间】：2016-10-26 18:43:51 【问题描述】：只是尝试在 CSS 中练习悬停和下拉菜单。在下面的代码中，我希望每当子下拉 div .li（带有 Home1 文本的绿色 div）悬停在上面时，ul（红色）的背景颜色应该变为蓝色。
非常感谢您的帮助。
html, body
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
*
box-sizing: border-box;
a
color: rgba(0,0,0,1);
text-decoration: none;
/* [disabled]background-color: rgba(255,0,0,1); */
display: block;
li
display: block;
width: 100px;
background-color: rgba(0,255,0,1);
border: thin solid rgba(0,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
/* [disabled]left: 0px; */
/* [disabled]top: 0px; */
margin-top: 5px;
/* [disabled]float: left; */
list-style-type: none;
a:hover
color: rgba(255,0,0,1);
.wrapper
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
.content
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
.content-small
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top:10px;
.content-small:hover + .dropdown
visibility: visible;
.dropdown:hover
visibility: visible;
ul
position: relative;
background-color: rgba(255,0,0,1);
max-width: 500px;
list-style-type: none;
margin-left: auto;
margin-right: auto;
height: auto;
padding: 0;
margin-top: 0px;
.dropdown
max-width: 500px;
/* [disabled]max-height: 100px; */
position: relative;
margin-right: auto;
margin-left: auto;
top: 0px;
margin-top: 5px;
visibility: hidden;
list-style-type: none;
text-align: center;
background-color: rgba(153,153,153,1);
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
</div>
<div class="dropdown">
<ul>
<li><a href="">Home1</a></li>
<li><a href="">Home2</a></li>
</ul>
</div>
</div>
</div>【问题讨论】：
【参考方案1】：我认为 javascript 是这里的简单解决方案。
如果要设置父元素的颜色，CSS 没有可用的当前选择器。
$('.dropdown li').mouseenter(function()
$(this).parent().css('background-color', 'blue');
);
$('.dropdown li').mouseleave(function()
$(this).parent().css('background-color', 'red');
);html,body
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
*
box-sizing:border-box;
a
color: rgba(0,0,0,1);
text-decoration: none;
/* [disabled]background-color: rgba(255,0,0,1); */
display: block;
li
display: block;
width: 100px;
background-color: rgba(0,255,0,1);
border: thin solid rgba(0,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
/* [disabled]left: 0px; */
/* [disabled]top: 0px; */
margin-top: 5px;
/* [disabled]float: left; */
list-style-type: none;
a:hover
color: rgba(255,0,0,1);
.wrapper
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
.content
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
.content-small
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top:10px;
.content-small:hover + .dropdown
visibility: visible;
.dropdown:hover
visibility: visible;
ul
position: relative;
background-color: rgba(255,0,0,1);
max-width: 500px;
list-style-type: none;
margin-left: auto;
margin-right: auto;
height: auto;
padding: 0;
margin-top: 0px;
.dropdown
max-width: 500px;
/* [disabled]max-height: 100px; */
position: relative;
margin-right: auto;
margin-left: auto;
top: 0px;
margin-top: 5px;
visibility: hidden;
list-style-type: none;
text-align: center;
background-color: rgba(153,153,153,1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
</div>
<div class="dropdown">
<ul>
<li><a href="">Home1</a></li>
<li><a href="">Home2</a></li>
</ul>
</div>
</div>
</div>【讨论】：
我只想坚持CSS @pure_coder 你不能在 CSS 中接近父元素，只能接近子元素和邻居。【参考方案2】：如果您坚持使用纯 CSS 解决方案，您可以考虑巧妙地设计和定位 :pseudo 元素。
CSS
.dropdown li
width: 100%;
background: transparent;
border: 0px;
position: relative;
z-index: 9;
.dropdown li a
max-width: 100px;
display: block;
margin: auto;
background-color: rgba(0,255,0,1);
border: thin solid rgba(0,0,0,1);
z-index: 9;
position: relative;
.dropdown li:hover
background: blue;
z-index: 8;
.dropdown li:hover:before
position: absolute;
content: "";
background: blue;
top: -100px;
bottom: -100px;
left: 0;
width: 100%;
.dropdown ul
overflow: hidden;
/* Start Added Styles */
.dropdown li
width: 100%;
background: transparent;
border: 0px;
position: relative;
z-index: 9;
.dropdown li a
max-width: 100px;
display: block;
margin: auto;
background-color: rgba(0,255,0,1);
border: thin solid rgba(0,0,0,1);
z-index: 9;
position: relative;
.dropdown li:hover
background: blue;
z-index: 8;
.dropdown li:hover:before
position: absolute;
content: "";
background: blue;
top: -100px;
bottom: -100px;
left: 0;
width: 100%;
.dropdown ul
overflow: hidden;
/* End Added Styles */
html,body
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
*
box-sizing:border-box;
a
color: rgba(0,0,0,1);
text-decoration: none;
/* [disabled]background-color: rgba(255,0,0,1); */
display: block;
li
display: block;
width: 100px;
background-color: rgba(0,255,0,1);
border: thin solid rgba(0,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
/* [disabled]left: 0px; */
/* [disabled]top: 0px; */
margin-top: 5px;
/* [disabled]float: left; */
list-style-type: none;
a:hover
color: rgba(255,0,0,1);
.wrapper
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
.content
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
.content-small
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top:10px;
.content-small:hover + .dropdown
visibility: visible;
.dropdown:hover
visibility: visible;
ul
position: relative;
background-color: rgba(255,0,0,1);
max-width: 500px;
list-style-type: none;
margin-left: auto;
margin-right: auto;
height: auto;
padding: 0;
margin-top: 0px;
.dropdown
max-width: 500px;
/* [disabled]max-height: 100px; */
position: relative;
margin-right: auto;
margin-left: auto;
top: 0px;
margin-top: 5px;
visibility: hidden;
list-style-type: none;
text-align: center;
background-color: rgba(153,153,153,1);
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
</div>
<div class="dropdown">
<ul>
<li><a href="">Home1</a></li>
<li><a href="">Home2</a></li>
</ul>
</div>
</div>
</div>您可能需要相应地调整值以满足您的要求。
免责声明 这有点小技巧，你有责任彻底测试它。此答案的目的是展示您需要达到的程度才能仅使用 CSS 来实现这一目标。
虽然，@randy 说父元素不能通过逻辑 CSS 样式以这种方式接近是正确的。如果您不愿意像上面那样探索打破常规的替代方案，那么 javascript 确实是您唯一的解决方案。
【讨论】：
看起来不错。相反，ul:hover background-color: rgba(0,0,204,1); 我上面的第一个代码怎么样？
@pure_coder “我希望每当子下拉 div .li（带有 Home1 文本的绿色 div）悬停在...”，就像你所说的那样，我的印象是您专门指的是列表项的a 元素（“...with Home1 text”）。以您上面提到的方式应用 background-color 更改绝对是最简单的解决方案，但如果这对您有用，那么您应该这样做。
我现在明白你在说什么了。但是在上面的代码中，正如我所提到的，只要鼠标悬停在li 项目（home1，home2）上，ul 应该将颜色从红色变为蓝色，但是当鼠标离开 li 项目和悬停ul 项目（蓝色背景）ul 颜色应该变回红色。上面的代码中不会发生这种情况。
@pure_coder 我希望您在最初的问题中明确表示：) 尽管我理解这一点，但当时您可能认为这很明显。如果您希望ul 以您期望的方式切换回红色，您可以随时从上面的代码中推断并调整它以满足您的需求（如果您有兴趣或有时间）。但您似乎已经接受了 javascript 解决方案——这可能是您的最佳选择，也是最快和最干净的。只有 CSS 的替代品，在这样的范围内总是会受到一点限制。以上是关于悬停改变颜色的主要内容，如果未能解决你的问题，请参考以下文章