javascript - 同时触发两个元素的悬停？

Question

更新:如何用JS实现？

我试图同时触发两个元素(在图像和 h1 标签上)的悬停。当用户将鼠标悬停在图像上时，h1 将触发其悬停，反之亦然。图像处于灰度模式，悬停时它会获得颜色并且 h1 标签正在改变颜色。这是我正在尝试做的事情的图像和代码(html/php-wordpress- 和 css 的原因)。谢谢:)

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 1

这是一个部分解决方案，只有将鼠标悬停在图像上时它才有效。当图像悬停时，悬停状态会在标题上触发，但反之则不起作用，因为兄弟选择器 ~ 无法在标记中“返回”。

.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>