Question

我想在不同元素悬停时从css / JS / JQuery中的类编辑特定属性，但是我不确定该怎么做例如。

<h1 class="result">Lorium</h1>
<h1 class="result">Ipsum</h1>
<h1 class="result">Dolor</h1>
<img src="example.png" class="images"/>
<img src="example.png" class="images"/>
<img src="example.png" class="images"/>

，以便当我将鼠标悬停在<h1>标记之一上时，它将更改src中的<img>，但其余部分将保持不变。我会在CSS，JS或JQuery中执行此操作吗？怎么样？

注意：它们必须是类，而不是id，因为我使用PHP来调用所有这些元素并且必须对其进行样式设置

谢谢

疲倦的程序员

Answer 1

首先，您需要使用类结果检测H1元素上的悬停/鼠标进入。

我将假设您所有的结果都具有班级成绩。

$('.result:eq(0)').mouseenter(function(){
console.log("hello world");
});

接下来，您需要更改与结果关联的img src-再一次，我将假定所有img具有相同的类。

$('.result:eq(0)').mouseenter(function(){
    $('.images:eq(0)').attr('src','https://via.placeholder.com/150x150')
});

我建议您编写一个函数，这样就不必对类选择器的第n个值进行硬编码。

进一步阅读：https://api.jquery.com/eq-selector/

如果您不使用jQuery-类似的逻辑，但是您将使用document.querySelector（'。result'）[0]等。

进一步阅读：http://mdn.beonex.com/en/DOM/Element.querySelectorAll.html

编辑-对于第n个值，其中n是结果和图像的相同索引号

$('.result').mouseenter(function(){
    var nValue = $(this).index();
    $('.images:eq('+nValue+')').attr('src','https://via.placeholder.com/150x150')
});

Answer 2

首先，HTML的结构似乎并没有真正可扩展的。我不会指望元素的顺序。相反，我将HTML重写为以下内容：

<div class="result-container">
  <h1 class="result">Result title</h1>
  <img src="something.png" class="image" />
</div>

然后使用jQuery处理事件，您可以执行以下操作：

function onHoverIn() {
  const resultTitle = $(this);
  const image = $(this).parent().find('.image')[0];

  image.attr('src', 'something-hovered.png');
}

function onHoverOut() {
  // same logic
}

$('.result-container .result').hover(onHoverIn, onHoverOut);

希望有帮助！

Answer 3

在jQuery中，通常您可以像这样更改图像：

$(".images").attr("src","second.jpg");

但是如您所见，由于所有图像都具有相同的类，因此您可能无法实现所需的功能。如果您希望将图像映射到标题标签，则需要一些区别图像。

由于您有多个，所以您可能正在寻找类似的东西：

$('.images').each(function() {
    //count the index and flip the image
});

如何更改类中的特定元素？

3 个答案: