javascript - 无法使用 jQuery 设置多个属性

Question

下面是 HTML 代码：

$('#shadowfax').hover(function () {
  $('#horsename').attr({
    class: 'display-5',
    text: 'Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...'});
},
function () {
  $('#horsename').text('A Horse with no name');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm">
  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">
</div>
<div class="row">
  <div class="col-lg">
    <p class="display-4" id="horsename">A Horse with no name</p>
  </div>
</div>

我无法根据将鼠标悬停在 shadowfax 元素上来更改 horsename 元素的内容。

我正在使用 jQuery v3.3.1 和 Bootstrap v4。

谢谢

标签： javascriptjquery

Answer 1

您可以像这样简单地在 HTML 元素上使用事件 -

<div class="col-sm">
        <img id="shadowfax" onmouseover='onMouseHover()' src="images/horse.jpg" alt="ShadowFax">
    </div>
    <div class="row">
      <div class="col-lg">
          <p class="display-4" onmouseout='onMouseOut()' id="horsename">A Horse with no name</p>
      </div>
    </div>

Working Example