我正在制作一个嵌套的 html 菜单。出于某种原因,在您实际将鼠标悬停在正确的元素上之前,悬停会一直触发。就好像另一个 div 或元素预先触发了它。
我认为这与我的 HTML 结构以及我在 css 中调用悬停的方式有关。
请参阅下面的片段 -
/*CAR ASSISTANT STYLES*/
.car-assist-container {
position: relative;
float: left;
width: 210px;
}
.assist-label {
display: block;
font-size: 1em;
float: left;
padding: 7px;
text-transform: uppercase;
color: black;
}
.assist-label:hover > .assist-list {
opacity: 1;
height: auto;
}
.assist-list {
width: 100px;
background-color: #141825;
height: 0;
opacity: 0;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
display: block;
}
.assist-item{
color: white;
display: block;
width: 100%;
padding: 8px;
border-bottom: 1px solid #1d2435;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
cursor: pointer;
-webkit-transition: color 0.4s ease;
-moz-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
transition: ocolor 0.4s ease;
}
.assist-item:hover {
color: #d40000;
}
.browse:after {
content: '▸';
}
.browse:hover > .browse-list{
opacity: 1;
}
.browse-list{
position: absolute;
right: 0;
width: 100px;
background-color: #1d2435;
top: 0;
opacity: 0;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
z-index: -1;
}
.browse-item{
color: white;
display: block;
width: 100%;
padding: 8px;
border-bottom: 1px solid #141825;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
}
.browse-item:hover {
color: #d40000;
}
<div class="car-assist-container">
<a href="#" class="assist-label" id="label">Car Assistant
<ul class="assist-list">
<li class="assist-item" id="carWorth">Car Worth</li>
<li class="assist-item browse">
Browse
<ul class="browse-list">
<li class="browse-item" id="browseMake">Makes</li>
<li class="browse-item" id="browseType">Types</li>
<li class="browse-item" id="browseYear">Year</li>
</ul>
</li>
<li class="assist-item">Compare</li>
</ul>
</a>
</div>
最佳答案
这可能是您想要的行为,代码更改最少。
/*CAR ASSISTANT STYLES*/
.car-assist-container {
position: relative;
float: left;
width: 210px;
}
.assist-label {
display: block;
font-size: 1em;
float: left;
padding: 7px;
text-transform: uppercase;
color: black;
}
.assist-label:hover > .assist-list {
opacity: 1;
height: auto;
}
.assist-list {
width: 100px;
background-color: #141825;
height: 0;
opacity: 0;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
display: block;
overflow: hidden;
margin: 0;
}
.assist-item{
color: white;
display: block;
width: 100%;
padding: 8px;
border-bottom: 1px solid #1d2435;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
cursor: pointer;
-webkit-transition: color 0.4s ease;
-moz-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
transition: ocolor 0.4s ease;
}
.assist-item:hover {
color: #d40000;
}
.browse:after {
content: '▸';
}
.browse:hover > .browse-list{
opacity: 1;
height: auto;
}
.browse-list{
position: absolute;
right: 0;
width: 100px;
background-color: #1d2435;
top: 0;
opacity: 0;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
z-index: 1;
height: 0;
overflow: hidden;
}
.browse-item{
color: white;
display: block;
width: 100%;
padding: 8px;
border-bottom: 1px solid #141825;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
}
.browse-item:hover {
color: #d40000;
}
<div class="car-assist-container">
<a href="#" class="assist-label" id="label">Car Assistant
<ul class="assist-list">
<li class="assist-item" id="carWorth">Car Worth</li>
<li class="assist-item browse">
Browse
<ul class="browse-list">
<li class="browse-item" id="browseMake">Makes</li>
<li class="browse-item" id="browseType">Types</li>
<li class="browse-item" id="browseYear">Year</li>
</ul>
</li>
<li class="assist-item">Compare</li>
</ul>
</a>
</div>
关于html - Css hover 在一个完全随机的元素上触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45751335/