Javascript .hover与.html一起使用时不起作用

我正在尝试使用jQuery进行简单的图像滚动，但这段代码不起作用：

HTML:

JS:

$（“#circleone”）。悬停(
函数（）{
$（this.html（“
”）；
},
函数（）{
$（this.html（“
”）；
}
);

“鼠标输入”事件可以正常触发，但当鼠标离开时不会发生任何事件

此外，代码可以很好地执行更简单的操作——在jQuery文档中，添加一个范围，然后删除它就可以了

为什么html不能工作？我已经在这上面呆了很久了

---

更新：几乎每一个答案/评论都建议只替换图像源，虽然这非常有效（谢谢！），但有时我确实需要更改HTML（例如更改文本）。这只是一个例子。对不起，我最好在问题中说明一下。

我想你的div是100%宽度。尝试添加“float:left”CSS属性。像这样

.secondcircle{
    float : left;
}

---

我想你的div是100%宽的。尝试添加“float:left”CSS属性。像这样

.secondcircle{
    float : left;
}

---

与其替换整个

HTML

，不如只更改图像的源代码

$("#circleone").hover(function () {
    $(this).find('img').attr("src","/../ex/img/group2.png\");
  },
  function () {
    $(this).find('img').attr("src","/../ex/img/group1.png\");
  }
);

---

与其替换整个

HTML

，不如只更改图像的源代码

$("#circleone").hover(function () {
    $(this).find('img').attr("src","/../ex/img/group2.png\");
  },
  function () {
    $(this).find('img').attr("src","/../ex/img/group1.png\");
  }
);

---

如果您调整它，使其仅替换

img

，则它可以工作，如下所示：

---

我认为主要的问题是您的

div

是一个块元素，它跨越了100%的宽度，然后内容在悬停时被替换，这会删除内容，所以它会闪烁。

如果您调整它，它会工作，所以它只会替换

img

，如下所示：

---

我认为主要的问题是你的

div

是一个块元素，它跨越了100%的宽度，然后内容在悬停时被替换，这会删除内容，所以它会闪烁。

为什么不使用CSS呢

#circleone {
  background-image:url('FirstImageURL');
}

circleone:hover{
  background-image:url('SecondImageURL');
}

---

完全从

窃取了这个，为什么不使用CSS呢

#circleone {
  background-image:url('FirstImageURL');
}

circleone:hover{
  background-image:url('SecondImageURL');
}

---

完全从

中窃取了这一点，您不需要用悬停事件替换整个HTML。如果您的目标是更改悬停时的图像，请改用

attr

方法：

HTML

<div class="secondcircle" id="circleone">
    <p>
        <img id="img1" src="http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg" />
    </p>
</div>

工作JsFiddle此处：

此外，从性能和最佳实践的角度来看，这是更好的

更新1 如果要使用HTML方法，请使用jQuery代码：

var originalContent = $('#circleone p').html();

$("#circleone").hover(
  function () {
      $('#circleone p').html('<img src="http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg"/>');
  },
  function () {
   $('#circleone p').html(originalContent);
  }
);

var originalContent=$（'#circleone p'）.html（）；
$（“#circleone”）。悬停(
函数（）{
$（'#circleone p'）.html（''）；
},
函数（）{
$（'#circleone p'）.html（原始内容）；
}
);

---

使用HTML的工作示例：

您不需要将整个HTML替换为悬停事件。如果您的目标是更改悬停时的图像，请改用

attr

方法：

HTML

<div class="secondcircle" id="circleone">
    <p>
        <img id="img1" src="http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg" />
    </p>
</div>

工作JsFiddle此处：

此外，从性能和最佳实践的角度来看，这是更好的

更新1 如果要使用HTML方法，请使用jQuery代码：

var originalContent = $('#circleone p').html();

$("#circleone").hover(
  function () {
      $('#circleone p').html('<img src="http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg"/>');
  },
  function () {
   $('#circleone p').html(originalContent);
  }
);

var originalContent=$（'#circleone p'）.html（）；
$（“#circleone”）。悬停(
函数（）{
$（'#circleone p'）.html（''）；
},
函数（）{
$（'#circleone p'）.html（原始内容）；
}
);

---

使用HTML的工作示例：

我在测试时注意到一些奇怪的东西。直到我在父div周围添加了一个边框，他的原始方法才起作用，然后它就可以正常工作了

有人知道为什么吗

---

我在测试这个的时候发现了一些奇怪的东西。直到我在父div周围添加了一个边框，他的原始方法才起作用，然后它就可以正常工作了

有人知道为什么吗

---

如果使用jQuery，为什么要使用

document.getElementById（'circleone'）.innerHTML

而不是

$（'circleone'）.html（）

？代码看起来很好。我能想到的唯一一件事就是你检查鼠标移动的方式

div

是块级元素，因此块的整个宽度不会触发事件。。。还有，为什么不直接替换图像的src，而不是替换整个图像呢html@j08691很抱歉，我实际上没有使用它，但这是我尝试过的许多事情之一，我不小心将错误的代码复制到了其中，但是没有效果（自然地），所以将其更改了回去。你能重现这个行为吗？代码看起来不错。确保您确实将鼠标移出div。更改其颜色以确保您知道它占据屏幕的哪个区域。如果您使用jQuery，为什么要执行

document.getElementById（'circleone'）。innerHTML

而不是

$（'circleone'）.html（）

？您的代码看起来很好。我能想到的唯一一件事就是你检查鼠标移动的方式

div

是块级元素，因此块的整个宽度不会触发事件。。。还有，为什么不直接替换图像的src，而不是替换整个图像呢html@j08691很抱歉，我实际上没有使用它，但这是我尝试过的许多事情之一，我不小心将错误的代码复制到了其中，但是没有效果（自然地），所以将其更改了回去。你能重现这个行为吗？代码看起来不错。请确保您确实将鼠标移出div。更改其颜色以确保您知道它占据屏幕的哪个区域。谢谢，只要我删除URL上的转义斜杠，这一点就行。我应该在q中指定我想使用HTML，因为我不确定它将来还需要做什么，但现在就可以了。@samiles。很高兴能帮上忙。。您也可以使用单引号代替espacing

src='/../ex/img/group2.png'

谢谢，只要我删除URL上的转义斜杠，这就行了。我应该在q中指定我想使用HTML，因为我不确定它将来还需要做什么，但现在就可以了。@samiles。很高兴见到你