CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user5306839
user5306839

Reputation:

(Bootstrap/JQuery) How to select each .'col-md-4' element within '.row' parent?

Im trying to make each row element react when hovered (using Animate.css). What I am unsure about is how to get JQuery to treat each element separately when hovered. Do I need to somehow loop through the child elements? Or is there an easier way? Any help in the right direction is much appreciated! Thanks you all

Eric

$('.row.writing').children().hover(function(){

	$(this).addClass('animated fadeInLeft')
});
<div class="row writing">
  <div class="col-xs-6 col-md-4 b"><a href="writing/wearcomp.pdf"><img   src="images/pencil113.png"/></a><br/>On Wearable Computing</div>
  <div class="col-xs-6 col-md-4 b"><a href="writing/wearcomp.pdf"><img src="images/pencil113.png"/></a><br/>Early State Based Civilizations: Aztec vs Maya</div>
  <div class="col-xs-6 col-md-4 b"><a href="writing/wearcomp.pdf"><img src="images/pencil113.png"/></a><br/>Cloud Computing & mobile device security</div>
  <div class="col-xs-6 col-md-4 b"><a href="writing/wearcomp.pdf"><img src="images/pencil113.png"/></a><br/>Looking Beneath the Screen: The Changing Nature of Interpersonal Communications</div>
  <div class="col-xs-6 col-md-4 b"><a href="writing/wearcomp.pdf"><img src="images/pencil113.png"/></a><br/>Out-of-Africa vs Multiregional: Comparing models of Human origins</div>
</div>

<!-- end snippet

<!-- begin snippet: js hide: false -->

-->

Upvotes: 0

Views: 721

Answers (2)

AleshaOleg
AleshaOleg

Reputation: 2211

You can use CSS selectors for this purpose. Here is example.

.row.writing > .col-xs-6:hover {
    background: red;
}

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

Use child-selector

$('.row.writing > div').hover(function(){
    $(this).addClass('animated fadeInLeft')
});

DEMO

Upvotes: 1

Related Questions