How to change the color of svg and choose ids and classes.

  • ildomandatore

    (@ildomandatore)


    2 years, 10 months ago

    How do I put the hover color change on SVGs?

    The X in the cookie banner at the bottom right and the site logo at the top left.

    Also, I would like to understand once and for all, which selectors to use exactly. In the Chrome developer tool, the id and class paths appear above the issues button. How do I interpret it?
    https://postimg.cc/YjX1mySC

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andy Peatling

    (@apeatling)

    2 years, 10 months ago

    .cn-close-icon:hover::before {
 background-color: red;
}

    that should work.

    Thread Starter ildomandatore

    (@ildomandatore)

    2 years, 10 months ago

    It works! Thanks. I also added .cn-close-icon: hover :: after {
    background-color: red;
    }
    Now I should add several SVG icons, but I color the background. For example the .custom-logo class.

    I made .custom-logo: hover {
    background-color: red;
    }
    This is not what I want.

    Thread Starter ildomandatore

    (@ildomandatore)

    2 years, 10 months ago

    How do I fix SVG color change on hover? The previous tip doesn’t work on everything.

    albert22

    (@albert22)

    2 years, 4 months ago

    Hi,ildomandatore(@

    How do I fix SVG color change on hover?

    The :hover selector is used to select elements when you mouse over them.

Tip: The :hover selector can be used on all elements, not only on links.

Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to <a href="https://sekho.com.pk">visited</a> pages, and the :active selector to style the active link.

Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!

    :hover {
    css declarations;
    }

    Select and style unvisited, visited, hover, and active links:

    /* unvisited link */
a:link {
  color: green;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: yellow;
}

    Show and hide a “dropdown” menu on mouse hover:

    ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}
    • This reply was modified 2 years, 4 months ago by albert22.
    • This reply was modified 2 years, 4 months ago by albert22.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to change the color of svg and choose ids and classes.’ is closed to new replies.