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

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

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

我的问题是jQuery悬停事件导致CSS悬停不起作用，我不太清楚原因

下面是我正在实现CSS悬停和jQuery悬停的列表项

下面是jQuery悬停事件，它将替换悬停时的文本

我还做了一个例子来说明这个问题

---

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

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

---

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

这是悬停前的HTML

当你停止悬停时，它看起来是这样的：

书写- 葵花 使用下面的代码，注意PhilomenaKwao，因为这是javascript将改变的内容

在选择元素时，jQuery的上下文很重要，特别是因为您当前仅用文本替换$'ProjectMage1-hover'的所有子元素

//项目悬停动画 $document.readyfunction{ //文本替换！ $'ProjectMage1-hover'.hover函数{ //将$this.text存储在变量中 $this.find'.name'.textArticle； }, 作用{ //把它分配回这里 $this.find'.name'.textPhilomena Kwao； }; }; 书写-

---

element.textHello删除该元素的所有内容，并将其替换为Hello。您的图像没有显示，因为它已从页面中删除。@Santi谢谢，这使它更清晰了。有什么方法可以解决这个问题吗？将要替换的文本包装在一个文件中，然后执行$this.find.name-text.textArticle。这样，您只替换name元素的内容，而不是整个列表项@Santi你能通过codepen快速演示一下吗？似乎对我不起作用，我一定是做错了什么。而且，您当前的方法似乎会让您手动为每个链接执行此操作，这可能会变得非常乏味。请考虑使用一种稍微更高级的技术：将悬停事件应用到所有元素，而不是ID.每一个将数据悬停文本属性放在它们上，然后您可以使用$.FordNeXT文本显示文本，Text $TAT.DATAHOVER文本；同样，这是稍微先进一点，但从长远来看要好得多。非常感谢你花时间解释我做错了什么。这很好用。

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

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

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

<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>