将鼠标悬停在单个元素CSS上时如何触发两个悬停

Question

I want to hover both classes col-md-3 and overlay-text via one hover. When hover over image I want to trigger second hover, in this case over text.

If CSS somehow could support if/else statements, I would wrote if col-md-3 is hovered then hover overlay-text .

 .overlay-text { background-color: #79b13c; color: white; z-index: 50; position: absolute; bottom: 0px; width: 270px; text-align: center; font-size: 1.4rem; font-weight: 600; -webkit-transition: background-color 0.5s ease-in-out, font-size 0.5s; -moz-transition: background-color 0.5s ease-in-out, font-size 0.5s; -o-transition: background-color 0.5s ease-in-out, font-size 0.5s; transition: background-color 0.5s ease-in-out, font-size 0.5s; } .overlay-text:hover { content: ""; background-color: #328ba6; cursor: pointer; transition: ease-in-out 0.5s, font-size 0.5s; line-height: 2; font-size: 1.5rem; } .overlay-text:hover::after { transition: ease-in-out 1s, font-size 1s; } .col-md-3 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; padding-left: 5px; padding-right: 5px; } .col-md-3 img { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .col-md-3 img:hover { -webkit-transform: translate3d(0, -10%, 0); transform: translate3d(0, -10%, 0); cursor: pointer; } .overlay-text-blank { text-align: center; font-size: 1.8rem; font-weight: 600; vertical-align: middle; } 

 <div class="container"> <div class="row tiles"> <div class="col-md-3"> <img alt="text" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" class="img-fluid"> <div class="overlay-text">Custom text</div> </div> </div> </div> 

FiddleJS Demo : https://jsfiddle.net/57nvbfud/5/

Answer 1

You have two options here:

First one change hover to img:hover + .overlay-text

Second one is change both hover in col-md-3:hover .

 .overlay-text { background-color: #79b13c; color: white; z-index: 50; position: absolute; bottom: 0px; width: 270px; text-align: center; font-size: 1.4rem; font-weight: 600; -webkit-transition: background-color 0.5s ease-in-out, font-size 0.5s; -moz-transition: background-color 0.5s ease-in-out, font-size 0.5s; -o-transition: background-color 0.5s ease-in-out, font-size 0.5s; transition: background-color 0.5s ease-in-out, font-size 0.5s; } .col-md-3:hover .overlay-text{ content:""; background-color: #328ba6; cursor: pointer; transition: ease-in-out 0.5s, font-size 0.5s; line-height: 2; font-size: 1.5rem; } .col-md-3:hover .overlay-text::after{ transition: ease-in-out 1s, font-size 1s; } .col-md-3 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; padding-left: 5px; padding-right: 5px; } .col-md-3 img { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .col-md-3:hover img{ -webkit-transform: translate3d(0,-10%,0); transform: translate3d(0,-10%,0); cursor: pointer; } .overlay-text-blank { text-align: center; font-size: 1.8rem; font-weight: 600; vertical-align: middle; } 

 <div class="container"> <div class="row tiles"> <div class="col-md-3"> <img alt="text" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" class="img-fluid"> <div class="overlay-text">Custom text</div> </div> </div> </div>