목록 항목에서 전체 width 호버 배경을 얻으려고합니다.
회색 배경도 왼쪽으로 전체 width를 가져와야합니다.
어떻게하면 되나요?
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 외부에서 오버플로되고 다음과 같이 모든 width를 덮을 의사 요소를 사용할 수 있습니다.
.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>
여기서는 플렉스 열이있는 메뉴를 만들고 각 항목에 호버를 적용하고 전환을 추가했습니다.
.container{
display: flex;
justify-content: space-between;
}
.resources-list{
display: flex;
flex-direction: column;
flex: 0 0 20%;
}
.resources-item{
transition: all 250ms linear;
}
.resources-item:hover{
background-color: gray;
}
.resources-item:before{
content: '• ';
}
.app-content{
flex: 0 0 75%;
}
<div class="container">
<div class="resources-list">
<h3>Resources List</h3>
<div class="resources-item">lorem3</div>
<div class="resources-item">lorem3</div>
<div class="resources-item">lorem3</div>
</div>
<div class="app-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia illum voluptates. Cumque earum cupiditate explicabo dolorum, praesentium dolor quia consequatur incidunt iste excepturi blanditiis dolores quibusdam odio quas quo.
</div
</div>