小编Dee*_*jay的帖子

我有一个图标列表。我想将图标颜色更改为白色。默认情况下，我的图标是黑色的。有什么建议吗？

我通常'fill: white'在我的 css 中使用，但现在我在 React 中这样做......它不起作用！

import React from 'react'
import menuIcon from '../img/menu.svg';
import homeIcon from '../img/home.svg';


<ul>
   <li>
    <a href="/" className="sidebar__link">
     <img src={menuIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
   <li>
    <a href="/" className="sidebar__link">
     <img src={homeIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
</ul>



.sidebar__icon {
 fill: #FFFFF;
 width: 3.2rem;
 height: 3.2rem;
}

我想一次将jquery hover()用于addClass("animated")到一个元素,而不是当用户将鼠标悬停在父元素上时所有具有.animated类的元素.

$(document).ready(function(){
    $(".animateDiv").hover(function() {
      $('.animated').addClass('rubberBand');
    }, function() {
      $('.animated').removeClass('rubberBand');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 1</h4>
</div>
    
<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 2</h4>
</div>

<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 3</h4>
</div>

<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 4</h4>
</div>

所以再次......当用户徘徊时,我如何将该类仅应用于一个盒子？