Question 174940 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can we rewrite this?

hello friends please I am using the styled component for my react project and have been stuck for days now while trying to add a hover effect to the icons in my header component. i would appreciate if anyone can help on how to target and add the hover effect to the header icons
Below is the styling as you can seein the media query i am trying to target and add a hover effect on the header icon but i am unable

   <NabList  >
        
        <a>
        
        <img src = "./images/nav-network.svg"
        alt = "" />
        
        <span > Network </span> 
        </a> 
        </NabList> 


  


const NabList = styled.li `
display: flex;
align-items: center;
font-size: 14px;
justify-content:center;


a{
  align-items:center;
  background-color: transparent;
  display:flex;
   flex-direction: column;
 
  
   font-weight: 400;
   font-weight: 12px;
   line-height: 1.5;
   min-width: 20px;
   max-height: 42px;
   text-decoration: none;
   margin-top:4px;
   padding:0 5px;
   span{
    display:flex;
    align-items: center;
    color : rgba(0, 0, 0, 0.6);
   padding-left: 10px;



  
   };





} 
@media (max-width: 768px) {
  a{
    padding:0 !important;
  }
  padding:0 2px;

  span{
    margin-right:5px;
    text-align:center;
    font-size:13px;
  };
  img{
    width:15px;

    &:last-child{
      width:12px;
    }
  }

}
&:hover{


a{
  span{

color:rgba(0, 0, 0, 0.9);

}
}

}
Tags:

3

Answers


  1. 0

    able to apply hover effect on icon

    • you use use svg code directly, no need to use with img tag.

    checkout it out example
    pls hover setting icon

    example

    export const SettingIcon = () => (
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect y="0.0229492" width="24.1283" height="23.2204" fill="white"/>
  <path d="M10.936 2.92554L9.80778 5.50961C9.58214 5.57475 9.37907 5.68333 9.17599 5.7919L6.49089 4.70616L4.86629 6.26963L5.99449 8.8537C5.88167 9.07085 5.79141 9.24457 5.70115 9.46172L3.01605 10.5475V12.719L5.70115 13.8047C5.79141 14.0218 5.88167 14.1956 5.99449 14.4127L4.86629 16.9968L6.49089 18.5603L9.17599 17.4745C9.37907 17.5614 9.58214 17.6699 9.80778 17.7568L10.936 20.3409H13.1924L14.3206 17.7568C14.5236 17.6699 14.7493 17.5831 14.9523 17.4745L17.6375 18.5603L19.2621 16.9968L18.1339 14.4127C18.2241 14.2173 18.3369 14.0001 18.4272 13.8047L21.1123 12.719V10.5475L18.4272 9.46172C18.3595 9.26628 18.2467 9.04913 18.1339 8.8537L19.2621 6.26963L17.6375 4.70616L14.9523 5.7919C14.7493 5.70504 14.5236 5.59647 14.3206 5.50961L13.1924 2.92554L10.936 2.92554ZM12.0642 8.35426C13.937 8.35426 15.4488 9.80916 15.4488 11.6115C15.4488 13.4138 13.937 14.8687 12.0642 14.8687C10.1914 14.8687 8.67959 13.4138 8.67959 11.6115C8.67959 9.80916 10.1914 8.35426 12.0642 8.35426Z" fill="#8090A9"/>
</svg>
)

    in here, you need to go down selector

    .icon svg path:hover {
  fill: #fad;
}
    Login or Signup to reply.
  2. 0

    just place &:hover selector outside the a selector to target the entire NabList component when hovered:

    const NabList = styled.li`
  display: flex;
  align-items: center;
  font-size: 14px;
  justify-content: center;

  a {
    align-items: center;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    font-weight: 400;
    font-weight: 12px;
    line-height: 1.5;
    min-width: 20px;
    max-height: 42px;
    text-decoration: none;
    margin-top: 4px;
    padding: 0 5px;

    span {
      display: flex;
      align-items: center;
      color: rgba(0, 0, 0, 0.6);
      padding-left: 10px;
    }
  }

  @media (max-width: 768px) {
    a {
      padding: 0 !important;
    }
    padding: 0 2px;

    span {
      margin-right: 5px;
      text-align: center;
      font-size: 13px;
    }

    img {
      width: 15px;

      &:last-child {
        width: 12px;
      }
    }
  }

  &:hover {
    a {
      span {
        color: rgba(0, 0, 0, 0.9);
      }
    }
  }
`;
    Login or Signup to reply.
  3. 0

    If you want to modify svgs I would suggest making them react components, and reading up on how to work with SVGs in react. I’ve used https://react-svgr.com/playground/ to convert svgs to react components, but I think you can do something a little simpler like this:

    import { ReactComponent as NavNetwork } from "./images/nav-network.svg";

    Then replace the image element with

    <NavNetwork className="nav-network" />

    Then to change opacity:

    .nav-network:hover {
  opacity: .5;
}

    Or this if you want to update the element when the container is hovered.

    #container:hover .nav-network{
    opacity: .5;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search