Question

我在同一个分配给列表项的类中混合使用jQuery和CSS悬停状态。

jQuery正在替换悬停时的文本。 CSS隐藏了div并在悬停时显示图像。

我的问题是jQuery悬停事件导致CSS悬停不起作用，我不太清楚为什么。

以下是我实施CSS Hover和jQuery hover的列表项

 <div class="list">
    <ul class="projectList">
    <li class="projectImage1"><a href="">Philomena Kwao<span><img src="helene images/philomena.jpg" alt="" height="580" width="370" /></span></a></li>
 </div

这里的CSS允许我隐藏一个部分并同时显示图像

.list:hover + section.container {
  display: none;
}

以下是在悬停时替换文字的jQuery悬停事件

    // Text replace! 
$('.projectImage1').hover(function() {     
           $(this).text("Article");
         },
        function() {
         $(this).text("Philomena Kwao");
 });

我还提出codepen来说明问题。

将鼠标悬停在第一个列表项上，然后将鼠标悬停在第二个列表项上，以清楚地看到发生了什么。

Answer 1

所以你实际上已经覆盖了你的所有内容。

因此，在您悬停之前，这是您的HTML

<div class="list">
  <h2>Writing - </h2>
  <ul class="projectList">
    <li class="projectImage1" id="projectImage1-hover">
      <a href="#">Philomena Kwao
        <span>
          <img src="helene images/philomena.jpg" alt="" height="580" width="370" />
        </span>
      </a>
      </li>
      <li class="projectImage2">
        <a href="#">Jorja Smith
          <span>
            <img src="helene images/jorja.jpg" alt="" height="450" width="450" />
          </span>
        </a>
      </li>
    </ul>
</div>

当您使用$('#projectImage1-hover').hover()进行悬停时，您实际上正在重写#projectImage1-hover的内容。

所以在你的悬停后它看起来像这样：

<div class="list">
  <h2>Writing - </h2>
  <ul class="projectList">
    <li class="projectImage1" id="projectImage1-hover">
       Article
    </li>
    <li class="projectImage2">
        <a href="#">Jorja Smith
          <span>
            <img src="helene images/jorja.jpg" alt="" height="450" width="450" />
          </span>
        </a>
      </li>
    </ul>
</div>

然后它就像你停止盘旋一样：

<div class="list">
  <h2>Writing - </h2>
  <ul class="projectList">
    <li class="projectImage1" id="projectImage1-hover">
      Philomena Kwao
    </li>
    <li class="projectImage2">
      <a href="#">Jorja Smith
        <span>
          <img src="helene images/jorja.jpg" alt="" height="450" width="450" />
        </span>
      </a>
    </li>
  </ul>
</div>

使用下面的代码，请注意<span class="name">Philomena Kwao</span>，因为这是javascript将会更改的内容。

选择元素时，jQuery的上下文很重要，特别是因为您目前只用文本替换$('#projectImage1-hover')的所有子元素。

// Project hover animations 
$(document).ready(function() {

  // Text replace! 
  $('#projectImage1-hover').hover(function() {
      // store $(this).text() in a variable     
      $(this).find('.name').text("Article");
    },
    function() {
      // assign it back here
      $(this).find('.name').text("Philomena Kwao");
    });

});

<div class="list">
  <h2>Writing - </h2>
  <ul class="projectList">
    <li class="projectImage1" id="projectImage1-hover">
      <a href="#">
        <span class="name">Philomena Kwao</span>
        <span>
          <img src="helene images/philomena.jpg" alt="" height="580" width="370" />
        </span>
      </a>
    </li>
  </ul>
</div>

以下是与Philomena Kwao合作的代码：https://codepen.io/anon/pen/KmBBLy

Answer 2

您对.text（）的调用会破坏列表项中包含的所有元素。请改为：在文本周围添加一个范围并直接选择它。

UserFactory.create(name='hank')

在同一个元素

2 个答案: