Want SVG and text link to change color on hover at same time-CodePudding

When I hover the SVG, both SVG and text of link change color. But when I hover the text, only the text changes color. Is there a way to combine both as a kind of one link area?

I would like to get a kind of field, where both SVG and text change color, when I hover over one of them. So the user sees that it belongs together. I experimented with <span> or <div>, but don't really have an idea where to start. I'm pretty much a beginner and appreciate your help.

.svg-social-menu li {
  display: inline-block;
  list-style-type: none;
}

.svg-social-menu li::before {
  display: none;
}

.svg-social-menu svg {
  fill: #6d9dbd;
}

.svg-social-menu svg:hover {
  fill: #4c4c4c;
}

.svg-social-menu a {
  color: #6d9dbd;
  text-decoration: none;
}

.svg-social-menu li {
  background: none;
  border: none;
  box-shadow: none;
}

.svg-social-menu a:hover {
  color: #4c4c4c;
}

.svg-social-menu a:visited {
  fill: #6d9dbd;
}

<ul >
  <li>
    <a href="https://www.newsletter.de"  alt="Newsletter-Logo">
      <svg version="1.1" id="Newsletter" xmlns="http://www.w3.org/2000/svg"  alt="Newsletter-Logo" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.84 491.84" style="enable-background:new 0 0 491.84 491.84;"
        xml:space="preserve" width="35" height="35">
    <title>Newsletter</title> 
    <desc>Link zum Newsletter</desc> 
        <g> 
            <g> 
                <path d="M481.64,205.12l-123-90.7c-8.3-6.3-21.9-5.2-28.1,4.2c-6.3,8.3-5.2,21.9,4.2,28.1l103.1,76l-192.9,148.2l-191.8-148.3
                l100.9-75.9c9.4-6.3,10.4-18.8,4.2-28.1c-6.3-9.4-18.8-10.4-28.1-4.2l-122,91.7c-5.9,3.9-8.5,10.3-8.1,16.8c0,0.4,0,0.8,0,1.1
                v245.9c0,14.3,10.4,20.8,20.8,20.8h448.1c18.4,0,22.9-8.6,22.9-20.8v-245.9C491.84,215.22,483.94,206.62,481.64,205.12z
                M41.74,266.52l107.3,82.6l-107.3,80.5C41.74,429.62,41.74,266.52,41.74,266.52z M81.74,450.12l101.7-75l49,37.5
                c7.3,5.2,17.7,5.2,25,0l49-38.6l101.4,76.1H81.74z M449.14,430.32l-108.4-81.3l108.4-83.4V430.32z"></path> <path d="M167.84,209.42l63.6,56.3c11.5,9.3,23.3,4.2,27.1,1l63.6-57.3c8.3-8.3,9.4-20.8,2.1-29.2s-20.8-9.4-29.2-2.1l-29.2,25.5
                V21.92c0-11.5-9.4-20.8-20.8-20.8s-20.8,9.4-20.8,20.8v181.8l-29.2-25.5c-8.3-7.3-21.9-6.3-29.2,2.1S159.44,202.12,167.84,209.42z">
                </path> 
            </g> 
        </g>
    </svg>
      <b>Newsletter</b>
    </a>
  </li>
</ul>

CodePudding user response：

Change the hover rule on your SVG from .svg-social-menu svg:hover to .svg-social-menu a:hover svg, this way it triggers the change on the SVG when your hover the anchor.

.svg-social-menu li {
  display: inline-block;
  list-style-type: none;
}

.svg-social-menu li::before {
  display: none;
}

.svg-social-menu svg {
  fill: #6d9dbd;
}

.svg-social-menu a:hover svg {
  fill: #4c4c4c;
}

.svg-social-menu a {
  color: #6d9dbd;
  text-decoration: none;
}

.svg-social-menu li {
  background: none;
  border: none;
  box-shadow: none;
}

.svg-social-menu a:hover {
  color: #4c4c4c;
}

.svg-social-menu a:visited {
  fill: #6d9dbd;
}

<ul >
  <li>
    <a href="https://www.newsletter.de"  alt="Newsletter-Logo">
      <svg version="1.1" id="Newsletter" xmlns="http://www.w3.org/2000/svg"  alt="Newsletter-Logo" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.84 491.84" style="enable-background:new 0 0 491.84 491.84;"
        xml:space="preserve" width="35" height="35">
    <title>Newsletter</title> 
    <desc>Link zum Newsletter</desc> 
        <g> 
            <g> 
                <path d="M481.64,205.12l-123-90.7c-8.3-6.3-21.9-5.2-28.1,4.2c-6.3,8.3-5.2,21.9,4.2,28.1l103.1,76l-192.9,148.2l-191.8-148.3
                l100.9-75.9c9.4-6.3,10.4-18.8,4.2-28.1c-6.3-9.4-18.8-10.4-28.1-4.2l-122,91.7c-5.9,3.9-8.5,10.3-8.1,16.8c0,0.4,0,0.8,0,1.1
                v245.9c0,14.3,10.4,20.8,20.8,20.8h448.1c18.4,0,22.9-8.6,22.9-20.8v-245.9C491.84,215.22,483.94,206.62,481.64,205.12z
                M41.74,266.52l107.3,82.6l-107.3,80.5C41.74,429.62,41.74,266.52,41.74,266.52z M81.74,450.12l101.7-75l49,37.5
                c7.3,5.2,17.7,5.2,25,0l49-38.6l101.4,76.1H81.74z M449.14,430.32l-108.4-81.3l108.4-83.4V430.32z"></path> <path d="M167.84,209.42l63.6,56.3c11.5,9.3,23.3,4.2,27.1,1l63.6-57.3c8.3-8.3,9.4-20.8,2.1-29.2s-20.8-9.4-29.2-2.1l-29.2,25.5
                V21.92c0-11.5-9.4-20.8-20.8-20.8s-20.8,9.4-20.8,20.8v181.8l-29.2-25.5c-8.3-7.3-21.9-6.3-29.2,2.1S159.44,202.12,167.84,209.42z">
                </path> 
            </g> 
        </g>
    </svg>
      <b>Newsletter</b>
    </a>
  </li>
</ul>

CodePudding user response：

You can also simplify your hover rules by using the currentColor keyword.

This way the svg fill color is inherited from the parent (text) color property

/*  inherit fill colour from parent colour (text) */
.svg-social-menu svg{
  fill:currentColor;
}  
.svg-social-menu a:hover {
  color: #4c4c4c;
}

.svg-social-menu li {
  display: inline-block;
  list-style-type: none;
}

.svg-social-menu li::before {
  display: none;
}

.svg-social-menu a {
  color: #6d9dbd;
  text-decoration: none;
}

/*  inherit fill colour from parent colour (text) */
.svg-social-menu svg{
  fill:currentColor;
}

.svg-social-menu a:hover {
  color: #4c4c4c;
}

<ul >
  <li>
    <a href="https://www.newsletter.de"  alt="Newsletter-Logo">
      <svg  id="Newsletter" xmlns="http://www.w3.org/2000/svg"  alt="Newsletter-Logo" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.84 491.84"
        xml:space="preserve" width="35" height="35">
    <title>Newsletter</title> 
    <desc>Link zum Newsletter</desc> 
        <g> 
            <g> 
                <path d="M481.64,205.12l-123-90.7c-8.3-6.3-21.9-5.2-28.1,4.2c-6.3,8.3-5.2,21.9,4.2,28.1l103.1,76l-192.9,148.2l-191.8-148.3
                l100.9-75.9c9.4-6.3,10.4-18.8,4.2-28.1c-6.3-9.4-18.8-10.4-28.1-4.2l-122,91.7c-5.9,3.9-8.5,10.3-8.1,16.8c0,0.4,0,0.8,0,1.1
                v245.9c0,14.3,10.4,20.8,20.8,20.8h448.1c18.4,0,22.9-8.6,22.9-20.8v-245.9C491.84,215.22,483.94,206.62,481.64,205.12z
                M41.74,266.52l107.3,82.6l-107.3,80.5C41.74,429.62,41.74,266.52,41.74,266.52z M81.74,450.12l101.7-75l49,37.5
                c7.3,5.2,17.7,5.2,25,0l49-38.6l101.4,76.1H81.74z M449.14,430.32l-108.4-81.3l108.4-83.4V430.32z"></path> <path d="M167.84,209.42l63.6,56.3c11.5,9.3,23.3,4.2,27.1,1l63.6-57.3c8.3-8.3,9.4-20.8,2.1-29.2s-20.8-9.4-29.2-2.1l-29.2,25.5
                V21.92c0-11.5-9.4-20.8-20.8-20.8s-20.8,9.4-20.8,20.8v181.8l-29.2-25.5c-8.3-7.3-21.9-6.3-29.2,2.1S159.44,202.12,167.84,209.42z">
                </path> 
            </g> 
        </g>
    </svg>
      <b>Newsletter</b>
    </a>
  </li>
</ul>