触发器同时悬停在两个元素中？

Question

更新：如何使用JS实现它？

我试图在同一时间触发两个元素（在图像和h1标签上）的悬停。当用户悬停图像时，h1将触发其悬停，反之亦然。图像处于灰度模式，当处于悬停状态时，它会获得颜色，而h1标记会改变颜色。这是我正在尝试做的代码和代码（wordpress-和css的html / php-cause）的图像。谢谢:)）

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

这是部分解决方案，只有悬停图像才有效。当图像悬停时，会在标题上触发悬停状态，但它没有相反的方式，因为兄弟选择器~无法返回＆＃34;在标记中。

＆＃13;

＆＃13;

.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+ */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

为什么不将图像和文本放在同一个div中，然后将悬停效果添加到包含它们的父div中。

Answer 3

• 在你的css中替换你的班级＆＃39;：hover＆＃39;带有＆＃39; .active＆＃39; ..
的选择器
• 在你的html添加课程＆＃39; lnk＆＃39;两个要素：

然后在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";
        }
}