Baptiste Arnaud Baptiste Arnaud - 5 months ago 10
CSS Question

Hovering a text that is on a div

When i hover a div, it triggers a css transition:

.hololens{
background: url('../img/hololens.png') no-repeat center center;
border-radius: 15px;
transition: opacity 0.5s;
}
.hololens:hover{
opacity: 0.3;
}


Now i have a text on this div :

<div class="hololens"></div>
<h3 style="top:80px;left:128px;">Hololens</h3>


And the CSS:

h3{
margin: auto;
font-family: $theme-font-light;
font-size: 40px;
position: absolute;
}


How can i tell my CSS to trigger the transition when my mouse hover the text too ?

Any ideas ?

Answer

You can do this with JQuery:

$('h3, .hololens').hover(function(){

   $('.hololens').css({
   opacity: '0.3'
   })
});
$('h3, .hololens').mouseleave(function(){
 $('.hololens').css({
   opacity: '1'
   });
})
.hololens{
    background: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT39dGEVeeOyUCzKlv37_8zYcn-XzounO6ovhNt0ilTRJAbT_D2F2TuCaU') no-repeat center center;
    border-radius: 15px;
    transition: opacity 0.5s;
    background-size: 100%;
    width: 400px;
    height: 400px;
}

h3{
    margin: auto;
    font-family: $theme-font-light;
    font-size: 40px;
    position: absolute;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="hololens"></div>
<h3 style="top:80px;left:128px;">Hololens</h3>