it doesn't work when i hover my li's in my navbar

huangapple
go评论71阅读模式
英文:

it doesn't work when i hover my li's in my navbar

问题

当我克隆劳力士（Rolex）网站以提升自己时，当我悬停在导航栏中的li元素上时，我想要同时改变我的SVG图标和超链接（a标签）的颜色，但它没有生效。

我尝试了以下方式：

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

但它没有生效。请帮我，为什么它不起作用？

英文:

when i clone rolex website to improve myself, when i hover over the li's in my navigation bar i want the color of both my svgs and a tags to change but it's not working;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#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;
}

<!-- language: lang-html -->

&lt;ul class=&quot;nav-links&quot;&gt;
  &lt;li&gt;
    &lt;svg height=&quot;18&quot; width=&quot;18&quot; viewBox=&quot;0 0 15 15&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                    &lt;path
                        d=&quot;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&quot;&gt;
                    &lt;/path&gt;
                &lt;/svg&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;Search&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;svg viewBox=&quot;0 0 15 15&quot;&gt;
                    &lt;path
                        d=&quot;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&quot;&gt;
                    &lt;/path&gt;
                &lt;/svg&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;Store locator&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;svg class=&quot;undefined css-1emgvlg e10fsun60&quot; height=&quot;18&quot; width=&quot;18&quot; viewBox=&quot;0 0 15 15&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot; alt=&quot;&quot;&gt;
                    &lt;path
                        d=&quot;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&quot;&gt;
                    &lt;/path&gt;
                &lt;/svg&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;Favourites&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

<!-- end snippet -->

i tried this way

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

but not worked, please help me, why it not working

答案1

得分: 1

这是要翻译的代码部分：

  1. 这个目标是 li 元素。
.nav-links li:hover{
   color: red; /*它不起作用，我尝试过了*/
}
  1. 想要改变我的两个 SVG 的颜色。

color 在 SVG 上不起作用。您需要针对更具体的元素（如 path）并使用实际影响它的属性（如 fill）。

  1. 以及要更改的 a 标签，但它不起作用；

您已经为 a 元素指定了它们自己的颜色：

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

即使您没有这样做，a 元素默认也有自己的颜色。

它们不会从 li 继承。

再次强调，您需要针对 a 元素本身进行目标，而不是 li。

英文:

This targets the li element.

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

> want the color of both my svgs

color doesn't do anything on an SVG. You need to target a more specific element (like the path) and use a propertiy that actually affects it (like fill.

> and a tags to change but it's not working;

You gave the a elements their own color:

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

Even if you didn't, a elements have their own colour by default.

They aren't going to inherit from the the li.

Again, you need to target the a element itself, not the li.

答案2

得分: 1

以下是您要翻译的内容：

"Quentin" 和 "iorgv" 指出：
SVG 元素不会自动继承父元素的 color 值，而是期望继承 fill 属性的值。

然而，您可以通过应用 fill: currentColor 值来简化您的 CSS 规则，如下所示：

svg path {
  fill: currentColor;
}

关键是要避免对 &lt;svg&gt; 或 &lt;path&gt; 元素应用特定的填充样式。

将 svg 图标包装在您的 &lt;a&gt; 元素内也可以简化 CSS 规则。

英文:

As pointed out by Quentin and iorgv:
svg elements wont't automatically inherit the parent's color value but expect a fill property value instead.

However, you can simplify your css rules by applying a fill: currentColor value like so

svg path{
  fill: currentColor;
}

It's crucial to avoid specific fill styles applied to the &lt;svg&gt; or &lt;path&gt; element.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

&lt;ul class=&quot;nav-links&quot;&gt;
  &lt;li&gt;
    &lt;svg height=&quot;18&quot; width=&quot;18&quot; viewBox=&quot;0 0 15 15&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
      &lt;path d=&quot;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&quot;&gt;
      &lt;/path&gt;
    &lt;/svg&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;Search&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;svg viewBox=&quot;0 0 15 15&quot;&gt;
      &lt;path d=&quot;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&quot;&gt;
      &lt;/path&gt;
    &lt;/svg&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;Store locator&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;svg class=&quot;undefined css-1emgvlg e10fsun60&quot; height=&quot;18&quot; width=&quot;18&quot; viewBox=&quot;0 0 15 15&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot; alt=&quot;&quot;&gt;
      &lt;path d=&quot;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&quot;&gt;
      &lt;/path&gt;
    &lt;/svg&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;Favourites&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

<!-- end snippet -->

Wrapping the svg icons within your &lt;a&gt; elements can also simplify the css rules.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

body{
  background: #ccc
}

.nav-links {
  display: flex;
}

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

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

/**
* no text decoration 
* inherit color
*/
.nav-links a{
  text-decoration: none;
  color:inherit;
  margin-left: 8px;
}

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

.nav-links path{
  fill: currentColor;
}

<!-- language: lang-html -->

&lt;ul class=&quot;nav-links&quot;&gt;
  &lt;li&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;
    &lt;svg height=&quot;18&quot; width=&quot;18&quot; viewBox=&quot;0 0 15 15&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
      &lt;path d=&quot;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&quot;&gt;
      &lt;/path&gt;
    &lt;/svg&gt;
      Search&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;
    &lt;svg viewBox=&quot;0 0 15 15&quot;&gt;
      &lt;path d=&quot;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&quot;&gt;
      &lt;/path&gt;
    &lt;/svg&gt;
      
      Store locator&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;&lt;svg class=&quot;undefined css-1emgvlg e10fsun60&quot; height=&quot;18&quot; width=&quot;18&quot; viewBox=&quot;0 0 15 15&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot; alt=&quot;&quot;&gt;
      &lt;path d=&quot;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&quot;&gt;
      &lt;/path&gt;
    &lt;/svg&gt;
      Favourites&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

<!-- end snippet -->

答案3

得分: 0

以下是翻译好的部分：

"因为你必须分别处理 a，而且必须为 svg 定义 fill 颜色，只有 fill 颜色可以更改为 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;
  /*它不起作用，我尝试过*/
}

#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;
}

/*从这里开始的新代码*/

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

svg path {
  fill: currentColor; /* 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="#">搜索</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="#">商店定位器</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="#">收藏夹</a>
  </li>
</ul>
英文:

It's because you have to address the a separately, and the fill color must be defined for the svg too, and only fill color can be changed for the svg.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#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;
}

<!-- language: lang-html -->

&lt;ul class=&quot;nav-links&quot;&gt;
  &lt;li&gt;
    &lt;svg height=&quot;18&quot; width=&quot;18&quot; viewBox=&quot;0 0 15 15&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                    &lt;path 
                        d=&quot;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&quot;&gt;
                    &lt;/path&gt;
                &lt;/svg&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;Search&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;svg viewBox=&quot;0 0 15 15&quot;&gt;
                    &lt;path 
                        d=&quot;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&quot;&gt;
                    &lt;/path&gt;
                &lt;/svg&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;Store locator&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;svg class=&quot;undefined css-1emgvlg e10fsun60&quot; height=&quot;18&quot; width=&quot;18&quot; viewBox=&quot;0 0 15 15&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot; alt=&quot;&quot;&gt;
                    &lt;path 
                        d=&quot;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&quot;&gt;
                    &lt;/path&gt;
                &lt;/svg&gt;
    &lt;a class=&quot;nav-a&quot; href=&quot;#&quot;&gt;Favourites&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月13日 17:18:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76241966.html
  • css
  • html
  • navbar
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定