我正在尝试在列表项上实现全宽悬停背景。
我还需要让灰色背景全宽向左。
如何实现:
HTML:
<div class="col-md-5 col-xs-12 additonal-resources-cont">
<h3 class="header-additnl-resources">Additional Resources </h3>
<ul class="additional-resrc-ul nopadding">
<li><a href="" class="additional-resources-href">Login / Register</a></li>
<li><a href="" class="additional-resources-href">Request Samples</a></li>
<li><a href="" class="additional-resources-href">Technical Documentation</a></li>
</ul>
</div>
CSS:
.additional-resources-href:hover {
background: #1daeeb;
opacity: 4.5;
background-color: #BFCDD5 !important;
}
.additional-resources-href {
color: black;
text-decoration: none;
}
.additional-resrc-ul li:before {
content: "• ";
font-weight: bold;
color: #1DAEEB;
}
.additional-resrc-ul li:hover {
background: #1daeeb;
opacity: 4.5;
background-color: #BFCDD5;
}
.additional-resrc-ul {
margin: 0px;
padding: 0px;
margin-left: 10%;
font-weight: 300;
font-size: 10px;
line-height: 3.5em;
}
最佳答案
您可以使用伪元素,它会溢出到 li 之外并覆盖所有宽度,如下所示:
.additional-resources-href:hover {
background: #1daeeb;
opacity: 4.5;
background-color: #BFCDD5 !important;
}
.additional-resources-href {
color: black;
text-decoration: none;
}
.additional-resrc-ul li {
position:relative;
}
.additional-resrc-ul li:before {
content: "• ";
font-weight: bold;
color: #1DAEEB;
}
.additional-resrc-ul li:after {
content: "";
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: -30%;
right: 0;
}
.additional-resrc-ul li:hover {
opacity: 4.5;
}
.additional-resrc-ul li:hover::after {
background: #BFCDD5;
}
.additional-resrc-ul {
margin: 0px;
padding: 0px;
margin-left: 10%;
font-weight: 300;
font-size: 10px;
line-height: 3.5em;
}
<div class="col-md-5 col-xs-12 additonal-resources-cont">
<h3 class="header-additnl-resources">Additional Resources </h3>
<ul class="additional-resrc-ul nopadding">
<li><a href="" class="additional-resources-href">Login / Register</a></li>
<li><a href="" class="additional-resources-href">Request Samples</a></li>
<li><a href="" class="additional-resources-href">Technical Documentation</a></li>
</ul>
</div>
关于Html ,CSS 固定宽度高亮悬停背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47606247/