on anchor hover also trigger hover on closest anchor

Question

I have multiple divs like so:

<div class="project">
    <div class="image">
        <a href="#"><img width="789" height="504" src="//localhost:3000/wp-content/uploads/2016/02/featured4.png"></a>
    </div>
    <!-- /.image -->
    <div class="info">
        <h1>Title</h1>
        <div class="paw"><span></span><a href="//localhost:3000/2016/02/22/title/">view project</a></div>
    </div>
    <!-- /.info -->
    <div class="clearfix"></div>
</div>

I want, when hovering over the <a> inside div.image to also trigger hover effect on the <a> inside div.paw (and vice versa), of course all inside the same div.project div

I tried like so but I get i do not see the hover effect on div.paw a

$('body').on('mouseenter', 'div.image a', function() {
    $(this).closest('div.paw a').trigger('mouseenter');
});

CSS:

div.image  img{
  transition: all .3s ease;
}
div.image a:hover img {
  transform: scale(1.1);
}

div.info div.paw span {
  transition: all .3s ease;
}

div.info div.paw A {
  transition: all .3s ease;
}

div.info div.paw:hover span {
  width: 33px;
}

div.info div.paw:hover a {
  margin-left: 20px;
}

Yes that was dumb, I have edited the code to look for div.paw a, now there is no error but I still do not see the hover effect? — dzimi, Feb 22 '16 at 13:45
Which hover effect are you talking about??? If set on CSS, then it won't work http://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover — A. Wolff, Feb 22 '16 at 13:46
i have deleted my comment because i thought i misread the question and read div.image instead of div.paw but you had actually changed the question...oh well, doesn't matter i guess — valepu, Feb 22 '16 at 13:48
@A.Wolff yes exactly, I have some different css transitions set on both anchors. there's no way to make it work? — dzimi, Feb 22 '16 at 13:49
@dzimi You need to use/toggle a class. Now if you provide minimalistic sample in question itself, as you should have already done, it would be easier for anyone else to help — A. Wolff, Feb 22 '16 at 13:50
@A.Wolff I don't get it, the effects happen on hover, how would I achieve the same with toggling a class? Can you post an example? — dzimi, Feb 22 '16 at 13:52
@dzimi eg toggling an `hover` class: `div.info div.paw:hover a, div.info div.paw.hover a { margin-left: 20px; }` — A. Wolff, Feb 22 '16 at 13:55
Yes sorry for not providing the css and explaining it's the css effects I am looking to trigger, my mistake, I have edited the question with relevant css. — dzimi, Feb 22 '16 at 13:55

valepu · Answer 1 · 2016-02-22T14:17:02.090

Closest doesn't find the nearest element (that is, the one next to the current) but the first element above the current one that matches the selector. https://api.jquery.com/closest/

You can fix it this way:

<div class="project">
    <div class="image">
        <a data-info="info-01" href="#"><img width="789" height="504" src="//localhost:3000/wp-content/uploads/2016/02/featured4.png"></a>
    </div>
    <!-- /.image -->
    <div class="info">
        <h1>Title</h1>
        <div class="paw"><span></span><a id="info-01" href="//localhost:3000/2016/02/22/title/">view project</a></div>
    </div>
    <!-- /.info -->
    <div class="clearfix"></div>
</div>

then in your code replace

$(this).closest('div.image a').trigger('mouseenter');

With

$('#'+$(this).data("info")).trigger('mouseenter');

EDIT

if you want to add a css style through javascript your only chance is to add a class to the element, you can't trigger an :hover effect from CSS using javascript.

you can achieve what you need using this:

div.paw a.hover {
  color: #FF0000;
  font-size: 30px;
  transition-duration: 3s;
}

You can put whatever you want inside the css, it will be the same you'd put inside a :hover CSS for the paw class. Then you use this in your code to add the class:

$("#"+$(this).data("info")).addClass('hover');

see here: http://plnkr.co/edit/SfUg9EkRhVGTEmpLhcsh?p=preview

Mind that you will need to handle the mouseout event too

$('body').on('mouseout', 'div.image a', function() {
    $("#"+$(this).data("info")).removeClass('hover');
});

i have been too hasty. This code will trigger for every element matching the selector, i'll fix in a second — valepu, Feb 22 '16 at 13:57
Thanks but it still won't trigger it, I guess as wolf said in the comment it can't trigger css transitions just like that, He mentioned toggling a class though honestly I still don't get what he meant. — dzimi, Feb 22 '16 at 13:58

Brino · Accepted Answer · 2016-02-22T14:14:05.967

You can add a 'hover' class to your css, then use the Jquery .hover() method to toggle the 'hover' class on mouseenter/mouseleave using the .toggleclass() method.

From within your hover method, you can select the next anchor by traversing up the tree to the common parent 'project' div using .closest(), then using .find(), to traverse back down the tree to the next anchor element within the paw div.

This will apply the hover only to the image that you hover over and the next div.paw anchor.

Here is an example:

$("div.project div.image a").hover(function() {
  $(this).toggleClass("hover");
  $(this).closest("div.project").find("div.paw a").toggleClass("hover");
});

.hover {
   border: 2px solid black;
   background-color: red;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="project">
  <div class="image">
    <a href="#">
      <img width="100" height="100" src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a">
    </a>
  </div>

  <!-- /.image -->
  <div class="info">
    <h1>Title</h1>
    <div class="paw">
      <span></span>
      <a href="//localhost:3000/2016/02/22/title/">view project</a>
    </div>
  </div>
  <!-- /.info -->
  <div class="clearfix"></div>
</div>

<div class="project">
  <div class="image">
    <a href="#">
      <img width="100" height="100" src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a">
    </a>
  </div>

  <!-- /.image -->
  <div class="info">
    <h1>Title</h1>
    <div class="paw">
      <span></span>
      <a href="//localhost:3000/2016/02/22/title/">view project</a>
    </div>
  </div>
  <!-- /.info -->
  <div class="clearfix"></div>
</div>

on anchor hover also trigger hover on closest anchor

2 Answers2