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

Question

我在分配给列表项的同一个类中混合使用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");
 }); 

我还制作了一个码页来说明这个问题。

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

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合作的代码助手：https://codepen.io/anon/pen/KmBBLy

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