Javascript 触发两个元素同时悬停？

更新：如何使用JS实现

我试图同时在两个元素中触发悬停（在图像和h1标记上）。当用户悬停图像时，h1将触发其悬停，反之亦然。图像处于灰度模式，当处于悬停状态时，它将获得其颜色，并且h1标记正在更改颜色。下面是我试图做的事情和代码的图片（html/php都是wordpress和css的原因）。谢谢：）

HTML

CSS

.blog帖子{
文字装饰：无；
颜色：#000；
-webkit过渡：颜色500毫秒；
-moz过渡：颜色500毫秒；
-毫秒转换：颜色500毫秒；
-o型过渡：颜色500毫秒；
过渡：颜色500毫秒；
}
.博客帖子a：悬停{
文字装饰：无；
颜色：#ffaf96；
}
.blog发布一个img{
滤镜：灰度（100%）；
-webkit过滤器：灰度（100%）；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox 10+*/
}
.blog post a img:hover{
滤镜：灰度（0%）；
-webkit过滤器：灰度（0%）；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
}

这是一个局部解决方案，仅当您将图像悬停时才有效。当图像处于悬停状态时，标题上会触发悬停状态，但由于同级选择器

~

无法在标记中“返回”，因此悬停状态不起作用

.blog帖子{
文字装饰：无；
颜色：#000；
-webkit过渡：颜色500毫秒；
-moz过渡：颜色500毫秒；
-毫秒转换：颜色500毫秒；
-o型过渡：颜色500毫秒；
过渡：颜色500毫秒；
}
.blog post a:hover、.blog post a:hover img、.blog post a:hover~h1 a{
文字装饰：无；
颜色：#ffaf96；
滤镜：灰度（0%）；
-webkit过滤器：灰度（0%）；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
}
.blog发布一个img{
滤镜：灰度（100%）；
-webkit过滤器：灰度（100%）；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
/*火狐10+*/
}

日期

Lorem ipsum dolor sit amet，是一位杰出的献身者。Mauris lectus dui，egestas非发酵菌id，bibendum faucibus purus。塞德·洛雷姆·埃尼姆、福西布斯和权杖以及萨皮恩的比本杜姆。整数是一个完整的数字。中间明渠
lobortis eros ac dapibus。多奈克·尤伊斯莫德·菲利斯前庭。Vivamus会把精英变成临时的sodales。罗汉果前庭。这是一个非常有趣的例子。

这是一个局部解决方案，仅当您将图像悬停时才有效。当图像处于悬停状态时，标题上会触发悬停状态，但由于同级选择器

~

无法在标记中“返回”，因此悬停状态不起作用

.blog帖子{
文字装饰：无；
颜色：#000；
-webkit过渡：颜色500毫秒；
-moz过渡：颜色500毫秒；
-毫秒转换：颜色500毫秒；
-o型过渡：颜色500毫秒；
过渡：颜色500毫秒；
}
.blog post a:hover、.blog post a:hover img、.blog post a:hover~h1 a{
文字装饰：无；
颜色：#ffaf96；
滤镜：灰度（0%）；
-webkit过滤器：灰度（0%）；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
}
.blog发布一个img{
滤镜：灰度（100%）；
-webkit过滤器：灰度（100%）；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
/*火狐10+*/
}

日期

Lorem ipsum dolor sit amet，是一位杰出的献身者。Mauris lectus dui，egestas非发酵菌id，bibendum faucibus purus。塞德·洛雷姆·埃尼姆、福西布斯和权杖以及萨皮恩的比本杜姆。整数是一个完整的数字。中间明渠
lobortis eros ac dapibus。多奈克·尤伊斯莫德·菲利斯前庭。Vivamus会把精英变成临时的sodales。罗汉果前庭。这是一个非常有趣的例子。

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

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

• 在css中，将您的类替换为“.active”
• 在html中，将类“lnk”添加到两个元素：

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

var lnks=document.queryselectoral（“.lnk”）；
对于（变量i=0；i

• 在css中，将您的类替换为“.active”
• 在html中，将类“lnk”添加到两个元素：

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

var lnks=document.queryselectoral（“.lnk”）；
对于（变量i=0；i

你可以发布php代码的输出吗？为什么不将鼠标悬停在

上。blog post

？可能与CSS重复不可能。当选择较低的内容时，您不能影响DOM中较高的内容。@Paulie\u D可能有一个使用同级选择器的解决方案，或者您可以发布php代码PLS的输出，为什么不将鼠标悬停在

。blog post

？可能与CSS重复不可能。你不能影响什么

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