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

【问题标题】：Using jQuery and CSS hover-states on the same element在同一个元素上使用 jQuery 和 CSS 悬停状态
【发布时间】：2017-05-16 20:53:24
【问题描述】：

我在分配给列表项的同一个类上混合使用了 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 来说明这个问题。

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

【问题讨论】：

element.text("Hello") 删除该元素的所有内容，并将其替换为 "Hello"。您的图片未显示，因为它已从页面中删除。
@Santi 谢谢，这使它更清晰。你有什么方法可以解决这个问题吗？
将要替换的文本包裹在<span class="name-text"> 中，然后执行$(this).find(".name-text").text("Article")。这样，您只替换了 name 元素的内容，而不是整个列表项。 Example
@Santi 你能通过 codepen 快速演示一下吗？似乎对我不起作用，我一定是做错了什么。
当然。 Here it is。此外，您当前的方法似乎会让您为每个链接手动执行此操作，这可能会变得非常乏味。考虑改用更高级的技术：将悬停事件应用到所有你的 <li> 元素，而不是每个 ID 元素。在它们上添加data-hover-text 属性，然后您可以使用$(this).find("name-text").text($(this).data("hover-text")); 显示文本 - 同样，这稍微高级一些，但从长远来看会更好。

标签： jquery css jquery-hover

【解决方案1】：

所以你实际上是在覆盖 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 的 codepen：https://codepen.io/anon/pen/KmBBLy

【讨论】：

非常感谢您花时间解释我做错了什么。这非常有效。

【解决方案2】：

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

 <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");
 });

【讨论】：