只是尝试在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>
答案 0 :(得分:3)
我认为Javascript是这里的简单解决方案。
如果要设置父元素的颜色,CSS没有可用的当前选择器。
$('.dropdown li').mouseenter(function(){
$(this).parent().css('background-color', 'blue');
});
$('.dropdown li').mouseleave(function(){
$(this).parent().css('background-color', 'red');
});
&#13;
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);
}
&#13;
<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>
&#13;
答案 1 :(得分:1)
如果您坚持使用仅支持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确实是您唯一的解决方案。