hambos22 hambos22 - 7 months ago 40
Javascript Question

Trigger hover in two elements the same time?

update: How can I achieve it with JS?

I'm trying to trigger a hover in two elements (on an image and on a h1 tag) the same time. When a user hover the image the h1 will trigger its hover and vice versa. The image is on grayscale mode and when is on hover it gets its colors and the h1 tag is changing color. Here is an image of what i'm trying to do and the code (both html/php-cause of wordpress- and css). Thank you :)

Hover states

HTML



<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('feat-thumb', array('class'=>'pull-left thumbnail margin10 img-thumbnail')); ?>
</a>

<p class="meta-info"><?php echo get_the_date( 'd.m.Y' ); ?></p>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

<article>
<p><?php echo excerpt(60); ?> </p>
</article>


CSS



.blog-post a {
text-decoration: none;
color: #000;
-webkit-transition: color 500ms ease;
-moz-transition: color 500ms ease;
-ms-transition: color 500ms ease;
-o-transition: color 500ms ease;
transition: color 500ms ease;
}

.blog-post a:hover {
text-decoration: none;
color: #ffaf96;
}

.blog-post a img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
}

.blog-post a img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

Answer

This is a partial solution, it only works if you hover the image. When image is hovered, the hover state is triggered on the title but it doesn't work the other way around because the sibling selector ~ can't "go back" in the markup.

.blog-post a {
  text-decoration: none;
  color: #000;
  -webkit-transition: color 500ms ease;
  -moz-transition: color 500ms ease;
  -ms-transition: color 500ms ease;
  -o-transition: color 500ms ease;
  transition: color 500ms ease;
}
.blog-post a:hover, .blog-post a:hover img, .blog-post a:hover ~ h1 a {
  text-decoration: none;
  color: #ffaf96;
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.blog-post a img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  /* Firefox 10+ */
}
<div class="blog-post">
  <a href="#">
    <img src="http://i.imgur.com/5NK0H1e.jpg" />
  </a>
  <p class="meta-info">date</p>
  <h1><a href="#">Title</a></h1>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lectus dui, egestas non fermentum id, bibendum faucibus purus. Sed lorem enim, faucibus et scelerisque et, bibendum at sapien. Integer suscipit sed tortor dictum pretium. Nullam interdum
      lobortis eros ac dapibus. Donec euismod felis id vestibulum pellentesque. Vivamus vulputate elit a sodales tempor. Vestibulum rutrum rhoncus rhoncus. Sed porttitor dui interdum metus tincidunt pulvinar eget vitae justo. 
    </p>
  </article>
</div>