Блог

Главная - Вопросы по программированию - Я хочу изменить штрихи текста при наведении курсора мыши… как я могу?

Я хочу изменить штрихи текста при наведении курсора мыши… как я могу?

#javascript #html #jquery #css #reactjs

#javascript #HTML #jquery #css #reactjs

Вопрос:

В исходном состоянии шрифты должны быть одного цвета, то есть черного или другого цвета, но когда кто-то наводит курсор на один 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>

Ответ №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 

});

Это фрагмент рабочего кода:

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