當(dāng)我克隆勞力士網(wǎng)站來(lái)改進(jìn)自己時(shí)，當(dāng)我將鼠標(biāo)懸停在導(dǎo)航欄中的li上時(shí)，我希望我的SVG和a標(biāo)簽的顏色都改變，但它不起作用；

#nav-bar .nav-links {
  display: flex;
}

#nav-bar .nav-links li {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-left: 30px;
}

.nav-links li:hover {
  color: red;
  /*it doesnt work, i tried it*/
}

#nav-bar .nav-links svg {
  height: 18px;
  width: 18px;
  fill: #fefefe;
}

#nav-bar .nav-links li a {
  color: #fefefe;
  font-size: 14.5px;
  margin-left: 8px;
}

<ul class="nav-links">
  <li>
    <svg height="18" width="18" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="m14.8 13.4-4-4c.7-1 1.1-2.1 1.1-3.4 0-3.2-2.6-5.8-5.8-5.8-3.3 0-5.9 2.6-5.9 5.8s2.6 5.8 5.8 5.8c1.3 0 2.4-.4 3.4-1.1l4 4zm-8.8-3.5c-2.1 0-3.9-1.7-3.9-3.9 0-2.1 1.8-3.9 3.9-3.9s3.9 1.8 3.9 3.9c0 2.2-1.7 3.9-3.9 3.9z">
                    </path>
                </svg>
    <a class="nav-a" href="#">Search</a>
  </li>
  <li>
    <svg viewBox="0 0 15 15">
                    <path
                        d="M7.5,0.5c-3,0-5.4,2.4-5.4,5.4c0,1.1,0.7,2.6,1.7,4c1.7,2.3,3.7,4.6,3.7,4.6s2-2.4,3.7-4.6  c0.9-1.4,1.7-2.9,1.7-4C12.9,2.9,10.5,0.5,7.5,0.5z M7.5,8.4C6.1,8.4,5,7.2,5,5.9c0-1.4,1.1-2.5,2.5-2.5S10,4.5,10,5.9  S8.9,8.4,7.5,8.4z">
                    </path>
                </svg>
    <a class="nav-a" href="#">Store locator</a>
  </li>
  <li>
    <svg class="undefined css-1emgvlg e10fsun60" height="18" width="18" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" alt="">
                    <path
                        d="m7.5 14.8-6.2-6.2c-1.7-1.7-1.7-4.5 0-6.2.8-.8 1.9-1.3 3.1-1.3 1.2 0 2.2.5 3.1 1.3v.1c.8-.8 1.9-1.3 3.1-1.3s2.2.5 3.1 1.3c1.7 1.7 1.7 4.5 0 6.2zm-3.1-11.6c-.6 0-1.2.2-1.6.7-.9.9-.9 2.4 0 3.3l4.7 4.8 4.7-4.8c.9-.9.9-2.4 0-3.3-.8-.9-2.4-.9-3.2 0l-1.5 1.5-1.5-1.5c-.4-.5-1-.7-1.6-.7z">
                    </path>
                </svg>
    <a class="nav-a" href="#">Favourites</a>
  </li>
</ul>

這針對(duì)的是li元素。

.nav-links li:hover{
   color: red; /*it doesnt work, i tried it*/
}

想要我兩個(gè)SVG的顏色嗎

顏色在SVG上不起任何作用。你需要瞄準(zhǔn)一個(gè)更具體的元素(比如路徑)并使用一個(gè)真正影響它的屬性(比如填充)。

和一個(gè)標(biāo)簽來(lái)改變，但它不起作用；

你給了a元素他們自己的顏色:

#nav-bar .nav-links li a {
    color: #fefefe;

即使你沒有，默認(rèn)情況下a元素也有自己的顏色。

他們是不會(huì)繼承李的。

同樣，您需要針對(duì)a元素本身，而不是li。

正如昆廷和約爾格夫所指出的: svg元素不會(huì)自動(dòng)繼承父元素的顏色值，而是需要一個(gè)fill屬性值。

但是，您可以通過應(yīng)用fill: currentColor值來(lái)簡(jiǎn)化css規(guī)則，如下所示

svg path{
  fill: currentColor;
}

避免將特定的填充樣式應(yīng)用于& ltsvg & gt或者& lt路徑& gt元素。

.nav-links {
  display: flex;
}

.nav-links li a{
  text-decoration: none;
}

.nav-links li {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-left: 30px;
  color:green;
}

/* icon specific styles */
.nav-links svg {
  display: inline-block;
  height:1em;
}

.nav-links path{
  fill: currentColor;
}

.nav-links li a {
  color:inherit;
  font-size: 14.5px;
  margin-left: 8px;
}

.nav-links li:hover {
  color: red;
}

<ul class="nav-links">
  <li>
    <svg height="18" width="18" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
      <path d="m14.8 13.4-4-4c.7-1 1.1-2.1 1.1-3.4 0-3.2-2.6-5.8-5.8-5.8-3.3 0-5.9 2.6-5.9 5.8s2.6 5.8 5.8 5.8c1.3 0 2.4-.4 3.4-1.1l4 4zm-8.8-3.5c-2.1 0-3.9-1.7-3.9-3.9 0-2.1 1.8-3.9 3.9-3.9s3.9 1.8 3.9 3.9c0 2.2-1.7 3.9-3.9 3.9z">
      </path>
    </svg>
    <a class="nav-a" href="#">Search</a>
  </li>
  <li>
    <svg viewBox="0 0 15 15">
      <path d="M7.5,0.5c-3,0-5.4,2.4-5.4,5.4c0,1.1,0.7,2.6,1.7,4c1.7,2.3,3.7,4.6,3.7,4.6s2-2.4,3.7-4.6  c0.9-1.4,1.7-2.9,1.7-4C12.9,2.9,10.5,0.5,7.5,0.5z M7.5,8.4C6.1,8.4,5,7.2,5,5.9c0-1.4,1.1-2.5,2.5-2.5S10,4.5,10,5.9  S8.9,8.4,7.5,8.4z">
      </path>
    </svg>
    <a class="nav-a" href="#">Store locator</a>
  </li>
  <li>
    <svg class="undefined css-1emgvlg e10fsun60" height="18" width="18" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" alt="">
      <path d="m7.5 14.8-6.2-6.2c-1.7-1.7-1.7-4.5 0-6.2.8-.8 1.9-1.3 3.1-1.3 1.2 0 2.2.5 3.1 1.3v.1c.8-.8 1.9-1.3 3.1-1.3s2.2.5 3.1 1.3c1.7 1.7 1.7 4.5 0 6.2zm-3.1-11.6c-.6 0-1.2.2-1.6.7-.9.9-.9 2.4 0 3.3l4.7 4.8 4.7-4.8c.9-.9.9-2.4 0-3.3-.8-.9-2.4-.9-3.2 0l-1.5 1.5-1.5-1.5c-.4-.5-1-.7-1.6-.7z">
      </path>
    </svg>
    <a class="nav-a" href="#">Favourites</a>
  </li>
</ul>

這是因?yàn)槟仨殕为?dú)處理a，并且還必須為svg定義填充顏色，并且只能為svg更改填充顏色。

#nav-bar .nav-links {
  display: flex;
}

#nav-bar .nav-links li {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-left: 30px;
}

.nav-links li:hover {
  color: red;
  /*it doesnt work, i tried it*/
}

#nav-bar .nav-links svg {
  height: 18px;
  width: 18px;
  fill: #fefefe;
}

#nav-bar .nav-links li a {
  color: #fefefe;
  font-size: 14.5px;
  margin-left: 8px;
}


/*new code from here*/

.nav-links li a:hover {
  color: red;
}
svg path {
  fill: currentColor; /* workaround by herrstrietzel */
}
.nav-links li:hover path {
  fill: red;
}

<ul class="nav-links">
  <li>
    <svg height="18" width="18" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
                    <path 
                        d="m14.8 13.4-4-4c.7-1 1.1-2.1 1.1-3.4 0-3.2-2.6-5.8-5.8-5.8-3.3 0-5.9 2.6-5.9 5.8s2.6 5.8 5.8 5.8c1.3 0 2.4-.4 3.4-1.1l4 4zm-8.8-3.5c-2.1 0-3.9-1.7-3.9-3.9 0-2.1 1.8-3.9 3.9-3.9s3.9 1.8 3.9 3.9c0 2.2-1.7 3.9-3.9 3.9z">
                    </path>
                </svg>
    <a class="nav-a" href="#">Search</a>
  </li>
  <li>
    <svg viewBox="0 0 15 15">
                    <path 
                        d="M7.5,0.5c-3,0-5.4,2.4-5.4,5.4c0,1.1,0.7,2.6,1.7,4c1.7,2.3,3.7,4.6,3.7,4.6s2-2.4,3.7-4.6  c0.9-1.4,1.7-2.9,1.7-4C12.9,2.9,10.5,0.5,7.5,0.5z M7.5,8.4C6.1,8.4,5,7.2,5,5.9c0-1.4,1.1-2.5,2.5-2.5S10,4.5,10,5.9  S8.9,8.4,7.5,8.4z">
                    </path>
                </svg>
    <a class="nav-a" href="#">Store locator</a>
  </li>
  <li>
    <svg class="undefined css-1emgvlg e10fsun60" height="18" width="18" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" alt="">
                    <path 
                        d="m7.5 14.8-6.2-6.2c-1.7-1.7-1.7-4.5 0-6.2.8-.8 1.9-1.3 3.1-1.3 1.2 0 2.2.5 3.1 1.3v.1c.8-.8 1.9-1.3 3.1-1.3s2.2.5 3.1 1.3c1.7 1.7 1.7 4.5 0 6.2zm-3.1-11.6c-.6 0-1.2.2-1.6.7-.9.9-.9 2.4 0 3.3l4.7 4.8 4.7-4.8c.9-.9.9-2.4 0-3.3-.8-.9-2.4-.9-3.2 0l-1.5 1.5-1.5-1.5c-.4-.5-1-.7-1.6-.7z">
                    </path>
                </svg>
    <a class="nav-a" href="#">Favourites</a>
  </li>
</ul>