将鼠标悬停在具有特定索引的元素上时，更改具有相同索引的另一个父元素中元素的样式

Question

我在网站上有两个地方有一个菜单。一个是文字，另一个是图片。您可以同时单击两者。

我希望当您将鼠标悬停在文本菜单中的特定项目上时(例如，在数字 2 下(，具有相同数字的图片会发生变化(例如，在数字 2 下(。

文本菜单的代码：

<ul>
<li class="page_item">
<a href="#">Test 1</a>
</li>
<li class="page_item">
<a href="#">Test 2</a>
</li>
</ul>

图片代码菜单：

<div class="project__card project__card-design">
<div class="project__card-design-bigelem">
<a href="#" class="project__img-link project__img-fromdesign" style="background-image: url(https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);"></a>
</div>
<div class="project__card-design-bigelem">
<a href="#" class="project__img-link project__img-fromdesign" style="background-image: url(https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);"></a>
</div>
<div class="project__card-design-bigelem">
<a href="#" class="project__img-link project__img-fromdesign" style="background-image: url(https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);"></a>
</div>
</div>

带有"图片和文本"菜单的屏幕截图： 带有"图片和文本"菜单的屏幕截图

我将不胜感激任何帮助！

因为我正在寻找可以识别突出显示数字的元素的解决方案。但到目前为止，我什至没有关于如何做到这一点的想法。

提前感谢任何帮助！

Answer 1

如果你喜欢这种行为，你可以这样做

悬停：导航1>图像导航1等...

您可以获取悬停项的索引，并将其与图像导航项匹配。很抱歉标记，这只是向您展示如何实现它。您还可以选择在mouseenter中进行匹配后执行任何操作

$(".js-hover").on("mouseenter", function () {
const hoverIndex = $(this).index();
const $imageListItems = $(".image-list > li");
$imageListItems.removeClass("image-list__item--selected");
$imageListItems.eq(hoverIndex).addClass("image-list__item--selected");
});

.image-list__item--selected {
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
</ul>
<ul class="image-list">
<li>image1</li>
<li>image2</li>
<li>image3</li>
<li>image4</li>
</ul>

Answer 2

这是一个使用纯 js 的解决方案，适用于不是使用 id 的父元素。

.html

<li id="child1" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent1"> </div>
<li id="child2" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent2"> </div>
<li id="child3" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent3"> </div>

这里是 JS

function customHover(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = '1px solid red';
}
function handleMouseLeave(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = 'unset';//or whatever you need to change the styles back to the original
}

Answer 3

有很多解决方案，不使用库。我认为如果可能的话，你可以使用一些jquery，如果没有，你应该搜索addeventlistener(高级方式(

https://api.jquery.com/hover/

是做你想做的事情的一个很好的例子。

var pageitemcount=0;
$( ".page_item" ).hover(function() {
pageitemcount++;
$.post("/mypageitemcounter.php",{pageitemcount:pageitemcount});
$(this).parent().append( $( "<span>"+pageitemcount+"</span>" ) );
});

以上部分是针对php的，仍然可以在插件中使用。 如果你在 wordpress 环境中，您还必须深入研究如何编写 wp 插件。尝试在环境中实现这一目标，然后将其应用于您的自定义 wp 插件是要走的路。如果可能，不要更改现有插件或主题。这可能会在更新后引起头痛。在wp环境中，编写自定义插件是要走的路。如果可能的话，您应该将您的问题标记为 wp 插件。