在下面的代码段中,我希望将鼠标悬停在整个div上时突出显示整个div,而不是单个单词。可能有一种简单的方法,我现在无法理解。
我尝试将所有元素分开放在一起,没有运气。如果可能的话,我想只使用CSS。除非绝对必要,否则我不想使用JavaScript。
.StepList {
margin: 20px 0 10px;
}
.stepBox {
white-space: nowrap;
padding: 0px 20px;
font-size: 110%;
}
.listNumbers {
height: 30px;
width: 30px;
line-height: 30px;
-moz-border-radius: 15px; /* or 50% */
border-radius: 15px; /* or 50% */
background-color: #dedede;
color: white;
text-align: center;
display: inline-block;
}
.locations {
text-transform: uppercase;
color: #dedede;
}
.typeOfBuild {
text-transform: uppercase;
color: #dedede;
}
/*hover for step list*/
a.stepBox:hover .StepList:hover, .stepBox:hover, .locations:hover, .typeOfBuild:hover {
color: #6495a9;
}
.listNumbers:hover {
background-color: #dedede;
color: #6495a9;
}
<div class = "StepList">
<span class ="stepBox">
<span class = "activeAccommodation">
<a href ="#">
<span class ="listNumbers"> 1 </span>
<span class="locations">location </span>
<span class="typeOfBuild">Accommodation </span>
</a>
</span>
</span>
<span class = "stepBox">
<span class = "activeActivities">
<a href ="#">
<span class ="listNumbers">2</span>
<span class="locations">location</span>
<span class="typeOfBuild">Activities</span>
</a>
</span>
</span>
<span class = "stepBox">
<span class = "activeRestaurant">
<a href ="#">
<span class ="listNumbers">3</span>
<span class="locations">location</span>
<span class="typeOfBuild">Restaurants</span>
</a>
</span>
</span>
<span class = "stepBox">
<span class = "activeNighlife">
<a href ="#">
<span class ="listNumbers">4</span>
<span class="locations">location</span>
<span class="typeOfBuild">Nightlife </span>
</a>
</span>
</span>
</div>
答案 0 :(得分:0)
我所做的是,当你将鼠标悬停在StepList
div上时,整个div会以红色背景突出显示
我已将此添加到您的CSS
.StepList:hover {
background-color:red;
}
答案 1 :(得分:0)
我发现您对.listNumbers
,.locations
和.typeOfBuild
有单独的突出显示规则。如果您希望在用户将鼠标悬停在.StepList
上时激活所有这些内容,请写下以下内容:
.StepList:hover .listNumbers, .StepList:hover .locations, .StepList:hover .typeOfBuild {
color: #6495a9;
}
以下代码段演示了这一点。点击&#34;运行代码段&#34;按钮下方查看结果。
.StepList {
margin: 20px 0 10px;
}
.stepBox {
white-space: nowrap;
padding: 0px 20px;
font-size: 110%;
}
.listNumbers {
height: 30px;
width: 30px;
line-height: 30px;
-moz-border-radius: 15px; /* or 50% */
border-radius: 15px; /* or 50% */
background-color: #dedede;
color: white;
text-align: center;
display: inline-block;
}
.locations {
text-transform: uppercase;
color: #dedede;
}
.typeOfBuild {
text-transform: uppercase;
color: #dedede;
}
/* link styling */
a {
text-decoration: none;
}
a:hover {
background: #ffc;
}
/* container hover */
.StepList:hover .listNumbers, .StepList:hover .locations, .StepList:hover .typeOfBuild {
color: #6495a9;
}
&#13;
<div class = "StepList">
<span class ="stepBox">
<span class = "activeAccommodation">
<a href ="#">
<span class ="listNumbers"> 1 </span>
<span class="locations">location </span>
<span class="typeOfBuild">Accommodation </span>
</a>
</span>
</span>
<span class = "stepBox">
<span class = "activeActivities">
<a href ="#">
<span class ="listNumbers">2</span>
<span class="locations">location</span>
<span class="typeOfBuild">Activities</span>
</a>
</span>
</span>
<span class = "stepBox">
<span class = "activeRestaurant">
<a href ="#">
<span class ="listNumbers">3</span>
<span class="locations">location</span>
<span class="typeOfBuild">Restaurants</span>
</a>
</span>
</span>
<span class = "stepBox">
<span class = "activeNighlife">
<a href ="#">
<span class ="listNumbers">4</span>
<span class="locations">location</span>
<span class="typeOfBuild">Nightlife </span>
</a>
</span>
</span>
</div>
&#13;
我还修改了链接样式,使页面看起来不那么杂乱。