1

I have this issue here where I have an svg as a logo next to my .brand-name class. What I have done so far is to make sure the svg looks like it's a part of the .brand-name class, meaning that whenever I hover over the .brand-name class, the svg also appears as if it was hovered over. However, I could not find any material as to how to get the opposite effect; meaning that when I hover over the svg, the .brand-name class also appears like it's been hovered over. I have been researching this topic using this thread, but I couldn't come up with a solution that could fit the svg to .brand-name class issue.

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

I've already created the motion where the svg appears to be hovered over when the user hovers over the .brand-name anchor class.

Additionally, if more information is required to aid me on this issue, I'd be more than grateful to help out to provide such. Please comment down below if such clarification is necessary. Many thanks!

Community
  • 1
  • 1
Californium
  • 491
  • 4
  • 17

1 Answers1

1

You can add hover to both at the same time:

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

Or

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

However, I would simplify the HTML to:

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

And use this as an example:

header a:hover svg {
  ...
}
header a:hover span {
  ...
}
Stickers
  • 75,527
  • 23
  • 147
  • 186