I am new to jquery, I have been trying to use the.hover event but i got this issues and i have not found my way around it. what i want to do is when i hove a div i want to add a border-color to that div which i have been able to do and at the same time i will also like to have the h4 tag to change color while the image to have a change like an opacity on the image with some text.
<div class="layout">
<div class="col-1 welcomediv">
<img src="images/electricalinstallation.png" class=" img-responsive" alt="Image">
<div class="col-1-text">
<div class="wh4">
<h4>My head 1</h4>
</div>
<center>
<hr class="col-1-hr">
</center>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
</div>
</div>
<div class="col-1 welcomediv">
<div class="col-1-text">
<div class="wh4">
<h4>My head 2</h4>
</div>
<center>
<hr class="col-1-hr">
</center>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
</div>
<img src="images/Transformer_Installation.jpg" class="img-responsive" alt="Image">
</div>
<div class="col-1 welcomediv">
<img src="images/House-Wiring.jpg" class="img-responsive" alt="Image">
<div class="col-1-text">
<div class="wh4">
<h4>My head 3</h4>
</div>
<center>
<hr class="col-1-hr">
</center>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p>
</div>
</div>
</div>
jquery code
$('.welcomediv').hover(function(){
$(this).addClass('col-1hover');
$('.wh4').addClass('col-1-texhover');
},
function(){
$(this).removeClass('col-1hover');
$('.wh4').removeClass('col-1-texhover');
});
CSS code
.col-1-texhover {
color:#f7b72f;
}
.col-1hover {
border-color: #f7b72f;
}
i will really like your help Thanks in advance
You need to get the element within the hovered element, either you can specify context with jQuery or use find()
method.
$('.welcomediv').hover(function() {
$(this).addClass('col-1hover');
$('.wh4', this).addClass('col-1-texhover');
// -----^^^^^----- here or $(this).find('.wh4')
},
function() {
$(this).removeClass('col-1hover');
$('.wh4', this).removeClass('col-1-texhover');
});
$('.welcomediv').hover(function() { $(this).addClass('col-1hover'); $('.wh4', this).addClass('col-1-texhover'); }, function() { $(this).removeClass('col-1hover'); $('.wh4', this).removeClass('col-1-texhover'); });
.col-1-texhover { color: #f7b72f; }.col-1hover { border: solid 1px #f7b72f; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="layout"> <div class="col-1 welcomediv"> <img src="images/electricalinstallation.png" class=" img-responsive" alt="Image"> <div class="col-1-text"> <div class="wh4"> <h4>My head 1</h4> </div> <center> <hr class="col-1-hr"> </center> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis. Nulla veniam ea culpa repellat odio.</p> </div> </div> <div class="col-1 welcomediv"> <div class="col-1-text"> <div class="wh4"> <h4>My head 2</h4> </div> <center> <hr class="col-1-hr"> </center> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Ut tempore asperiores veniam ex laborum. repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis. Nulla veniam ea culpa repellat odio.</p> </div> <img src="images/Transformer_Installation.jpg" class="img-responsive" alt="Image"> </div> <div class="col-1 welcomediv"> <img src="images/House-Wiring,jpg" class="img-responsive" alt="Image"> <div class="col-1-text"> <div class="wh4"> <h4>My head 3</h4> </div> <center> <hr class="col-1-hr"> </center> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p> </div> </div> </div>
:hover
selector .
.welcomediv:hover.wh4 { color: #f7b72f; }.welcomediv:hover { border: 1px solid #f7b72f; }
.welcomediv:hover.wh4 { color: #f7b72f; }.welcomediv:hover { border: 1px solid #f7b72f; }
<div class="layout"> <div class="col-1 welcomediv"> <img src="images/electricalinstallation.png" class=" img-responsive" alt="Image"> <div class="col-1-text"> <div class="wh4"> <h4>My head 1</h4> </div> <center> <hr class="col-1-hr"> </center> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis. Nulla veniam ea culpa repellat odio.</p> </div> </div> <div class="col-1 welcomediv"> <div class="col-1-text"> <div class="wh4"> <h4>My head 2</h4> </div> <center> <hr class="col-1-hr"> </center> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Ut tempore asperiores veniam ex laborum. repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis. Nulla veniam ea culpa repellat odio.</p> </div> <img src="images/Transformer_Installation.jpg" class="img-responsive" alt="Image"> </div> <div class="col-1 welcomediv"> <img src="images/House-Wiring,jpg" class="img-responsive" alt="Image"> <div class="col-1-text"> <div class="wh4"> <h4>My head 3</h4> </div> <center> <hr class="col-1-hr"> </center> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempore asperiores veniam ex laborum, repellendus perspiciatis itaque at deleniti esse nostrum facere eveniet reiciendis! Nulla veniam ea culpa repellat odio.</p> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.