在同一元素上使用 jQuery 和 CSS 悬停状态

Question

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

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

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

这是我在 CSS 悬停和 jQuery 悬停

上实现的列表项

 <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

您对 .text() 的调用破坏了列表项中包含的所有元素。改为这样做：在您的文本周围添加一个 span 并直接 select 它。

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


$('.projectImage1').hover(function() {     
           $('.projectImage1 hover-text').text("Article");
         },
        function() {
         $('.projectImage1 hover-text').text("Philomena Kwao");
 });

Answer 2

所以你实际上覆盖了 li 中的所有内容。

这是你悬停前的 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

在同一元素上使用 jQuery 和 CSS 悬停状态

Using jQuery and CSS hover-states on the same element

css

jquery

jquery-hover