Trigger hover in two elements the same time?

Question

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");
 }

possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Paulie_D, Jun 11 '14 at 09:51
Not possible with CSS. You cannot affect something higher in the DOM when selecting something lower. — Paulie_D, Jun 11 '14 at 09:53
If you hover the `h1` you cannot affect the image that is higher / before it in the DOM as you cannot select it. Certainly hovering the parent 'wrapper' would be an option though. — Paulie_D, Jun 11 '14 at 09:55
@Paulie_D you are right for the image, couldn't find a solution for that but the hover state on the title can be tiggered by hovering the image. — web-tiki, Jun 11 '14 at 10:03
Granted..the image hover was basic...it's the reverse that requires JS/JQ — Paulie_D, Jun 11 '14 at 10:04
@hambos22 do you have jquery available, or you prefer pure js solution? — webkit, Jun 11 '14 at 10:39
I'm a little bit begginer in jQuery. I just know how to experiment on already made code :p Pure js maybe? — , Jun 11 '14 at 10:41
@hambos22 look at the answer below with pure js.. if you have any question let me know. — webkit, Jun 11 '14 at 11:06

web-tiki · Accepted Answer · 2016-05-02T09:52:41.327

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>

@hambos22 maybe this is better. But as I said, this is a partial solution and won't achieve the exact behaviour you are looking for. To achieve it you will need some JS — web-tiki, Jun 11 '14 at 10:18
i'll update my question then :) because i dont know how to make it with js — , Jun 11 '14 at 10:22
@hambos22 sorry, forgot to post the link to fiddle in my previous comment, try this http://jsfiddle.net/webtiki/WFx8g/3/ — web-tiki, Jun 11 '14 at 10:23
I saw it. This one works only if you hover the image only. If you hover the title the image doesnt change state. — , Jun 11 '14 at 10:26
yes, As I and @Paulie_D stated CSS can't select a higher in the DOM element that is why you need JS. BTW you should not change the question drasticaly like that, now answers are all wrong, maybe you should try some JS/jQuery and ask a new question with the new issue. — web-tiki, Jun 11 '14 at 10:30

score 1 · Answer 2 · answered Jun 11 '14 at 10:48

1

why don't you put both the image and the text in the same div and then add the hover effect to that parent div, containing both of them.

answered Jun 11 '14 at 10:48

gomzy

250
1
2
10

score 1 · Answer 3 · answered Jun 11 '14 at 11:04

In your css replace your class ':hover' selector with '.active'..
In your html add class 'lnk' to both elements:

then in js:

var lnks = document.querySelectorAll(".lnk");

for (var i = 0; i < lnks.length; i++) {
    lnks[i].addEventListener('mouseenter', hoverHandler, false);
    lnks[i].addEventListener('mouseleave', hoverHandler, false);
}

function hoverHandler(e) {
        for (var i = 0; i < lnks.length; i++) {
        lnks[i].className  = (e.type=="mouseenter") ? lnks[i].className + " active" : "lnk";
        }
}

do you have access to the html (php) also? – webkit Jun 11 '14 at 11:11 — webkit, Jun 11 '14 at 11:11

Trigger hover in two elements the same time?

HTML

CSS

3 Answers3