我想更改悬停时的文字笔划……我该怎么做？答案

【问题标题】：I want to change text strokes on hover ... how can i?我想更改悬停时的文字笔划……我该怎么做？
【发布时间】：2021-01-20 04:45:05
【问题描述】：

在初始状态下，字体应该是相同的颜色，即黑色或其他颜色，但是当有人将鼠标悬停在一个p 文本上时，悬停文本应该改变它的颜色，而其余的字体会改变它的颜色，而文本-颜色是透明的，反之亦然，

当我将鼠标悬停在文本上时，它应该会恢复正常颜色。我想在 CMS 内容中应用它，因此它需要采用动态值，如果不是动态的，但至少需要更改颜色和笔触。

.style1 {
  font-size: 30px;
  position: absolute;
}

.Ancestors {
  width: 500px;
  height: 500px;
  font-size: 30px;
  text-align: center;
  background: #00f;
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.overAncestors {
  width: 500px;
  height: 500px;
  font-size: 30px;
  text-align: center;
  color: black;
}

<table border="0" cellpadding="10" cellspacing="100" summary="">
  <tr>
    <td>
      <span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">vita</span>
    </td>
    <td>
      <span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">mege</span>
    </td>
    <td>
      <span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">Hita</span>
    </td>
    <td>
      <span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">nitml</span>
    </td>
    <td>
      <span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">rage</span>
    </td>
  </tr>
</table>

【问题讨论】：

标签： javascript html jquery css reactjs

【解决方案1】：

您的代码的主要问题是，一旦将 Ancestors 类添加到 <span> 标记中，就再也不会删除它了。

只要有鼠标悬停和鼠标移出事件，您就可以使用 jquery 的 hover() 调整 span 类。

这是算法的思路：

$('.style1').hover(function(){

  //mouse over...
  //Add class 'overAncestor' in the span hovered
  //Add class 'Ancestor' in the other spans

}, function(){
    
  //mouse out...
  //Remove class 'Ancestor' and 'overAncestor' of all spans 

});

这是工作代码的 sn-p：

$(document).ready(function(){
  $('.style1').hover(function(){
    $('.style1').addClass('Ancestors');
    $(this).addClass('overAncestors').removeClass('Ancestors');
  }, function(){
    $('.style1').removeClass('Ancestors').removeClass('overAncestors');
  });
});

.style1 {
  font-size: 30px;
  position: absolute;
}

.Ancestors {
  font-size: 30px;
  text-align: center;
  background: #00f;
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.overAncestors {
  font-size: 30px;
  text-align: center;
  color: black;
}

<table border="0" cellpadding="10" cellspacing="100" summary="">
  <tr>
    <td>
      <span class="style1" valign="middle">vita</span>
    </td>
    <td>
      <span class="style1" valign="middle">mege</span>
    </td>
    <td>
      <span class="style1" valign="middle">Hita</span>
    </td>
    <td>
      <span class="style1" valign="middle">nitml</span>
    </td>
    <td>
      <span class="style1" valign="middle">rage</span>
    </td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：