Question

我有这个问题，我的svg课程旁边有一个.brand-name作为徽标。到目前为止，我所做的是确保svg看起来像是.brand-name类的一部分，这意味着每当我将鼠标悬停在.brand-name类上时，svg看起来好像它还在盘旋。但是，我找不到任何关于如何产生相反效果的材料;这意味着当我将鼠标悬停在svg上时，.brand-name类似乎也会被悬停在上面。我一直在使用this thread,来研究这个主题，但我无法提出一个适合svg到.brand-name课程问题的解决方案。

HTML

  <ul class="brand">
    <li><a href="#" class="logo-container">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="40px" height="35px" viewBox="0 0 363.818 363.818" style="enable-background:new 0 0 363.818 363.818;" xml:space="preserve">
        <path class="logo" d="M358.872,0.841c-3.196-1.538-7.014-0.931-9.572,1.526c-19.515,18.728-53.141,46.415-102.511,71.961    c-2.159,1.118-3.737,3.106-4.333,5.463c-4.028,15.908-11.933,33.271-23.492,51.607l-4.705,7.462l8.772-38.205    c0.715-3.115-0.378-6.368-2.828-8.42c-2.451-2.052-5.846-2.556-8.786-1.303l-1.015,0.428    C110.79,133.291,81.352,198.24,72.67,233.22c-3.013,12.141-4.516,24.163-4.465,35.738c0.02,4.466,0.272,8.722,0.75,12.705    l-66.39,67.703c-3.211,3.273-3.246,8.505-0.078,11.822c1.667,1.745,3.904,2.629,6.149,2.629c2.02,0,4.045-0.717,5.664-2.164    l182.428-163.851c0.896,0.059-103.874,109.806-102.925,109.806c14.22,0,33.863-6.555,56.804-18.95    c30.935-16.717,65.508-42.37,99.979-74.185c2.832-2.612,3.551-6.805,1.753-10.213c-1.798-3.407-5.662-5.181-9.42-4.315    l-21.363,4.904l7.465-4.706c20.835-13.136,40.313-21.511,57.891-24.897c1.901-0.367,3.622-1.372,4.875-2.849    c41.348-48.75,58.853-96.919,66.256-128.743c2.69-11.567,4.579-23.134,5.607-34.38C363.972,5.742,362.069,2.379,358.872,0.841z" fill="#FFFFFF"/>
      </svg>
    </a></li>
  <li><a href="#" class="brand-name">Company Name</a></li>
 </ul>

CSS

.header ul.brand .logo {
  transition: 0.2s ease-in-out fill;
}
.header ul.brand:hover .logo {
  fill: #fbabab;
  color: #fbabab;
}
.header ul.brand .logo:hover {
  fill: #fbabab;
  color: #fbabab;
}

当用户将鼠标悬停在svg锚类上时，我已经创建了.brand-name似乎悬停的动作。

此外，如果需要更多信息来帮助我解决这个问题，我将非常感谢帮助提供此类信息。如果需要澄清，请在下面评论。非常感谢！

Answer 1

您可以同时为两者添加悬停：

.header ul.brand:hover .logo,
.header ul.brand:hover .brand-name {
  fill: #fbabab;
  color: #fbabab;
}

或者

.header ul.brand:hover .logo {
  fill: #fbabab;
}
.header ul.brand:hover .brand-name {
  color: #fbabab;
}

但是，我会将HTML简化为：

<header>
  <a href="#">
    <svg>...</svg>
    <span>Company Name</span>
  </a>
</header>

并以此为例：

header a:hover svg {
  ...
}
header a:hover span {
  ...
}

如果SVG悬停在如何影响其他元素？

1 个答案: