使用样式组件在冷冻元素上添加悬停效果答案

【问题标题】：Adds the effect of the hover on the chilled element using the styled component使用样式组件在冷冻元素上添加悬停效果
【发布时间】：2021-12-01 23:01:42
【问题描述】：

大家晚上好。我正在尝试使用 React 构建一个组件并使用样式组件来添加 CSS。但是当给元素（a）添加悬停效果时，效果也会体现在（a）里面的所有元素上。如图所示

<Section>
<PortLogin>
<h1>Welcome to Your Profettional Community</h1>

 <ul>
   <a href="##" ><li href="##">Search For a job</li><i className="fas fa-chevron-right"></i> 
 </a>
   <a  href="##"><li href="##">Find a Person You Know</li><i className="fas fa-chevron-right"> 
 </i></a>
   <a  href="##"><li href="##">Learn a new skill</li><i className="fas fa-chevron-right"></i> 
 </a>
   
 </ul>
 </PortLogin>
 <img src="Img/SectionImg.svg" alt="Img Section "></img>

  </Section>

我的样式化组件

const Section=styled.div`

display: flex;
justify-content: start;
 flex-wrap:wrap;
 margin-top: 40px;

 & img{
   width: 500px;
   position: absolute;
   right: 0;
     }
 `;

 const PortLogin=styled.div`
 margin-top: 25px;
 display:flex;
 flex-direction:column;
 justify-content:space-around;

 & ul{
  margin-top:50px;
 
     & :hover {
     box-shadow: 3px 3px 8px 2px #00000040;
      }
      }

    & ul>a{
       text-decoration:none;
       padding: 25px 20px;
       margin-bottom: 20px;
       width:70%;
       list-style: none;  
       display: flex;
       justify-content:space-between;
       border: 1px solid #d3cccc;
       border-radius: 13px;
       font-size: larger
     }

      ul li a{
      text-decoration: none;
      color:Black;
     }
      `

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

您需要将您的 hover 类移出您的 ul 标记（其中包含所有元素，因此包含其中的所有列表和链接。

我假设您希望链接只能悬停，所以这样的东西应该更合适：

const PortLogin = styled.div`
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  & ul {
    margin-top: 50px;
  }

  & ul > a {
    text-decoration: none;
    padding: 25px 20px;
    margin-bottom: 20px;
    width: 70%;
    list-style: none;
    display: flex;
    justify-content: space-between;
    border: 1px solid #d3cccc;
    border-radius: 13px;
    font-size: larger;
  }

  ul li a {
    text-decoration: none;
    color: Black;
  }
  ul li a:hover {
    text-decoration: underline;
  }
`;
`

【讨论】：

【解决方案2】：

我解决了这个问题。解决方案非常简单。我必须使用 Direct Child

const PortLogin = styled.div`
   margin-top: 25px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;

    & > ul {
    margin-top: 50px;
     }

     & ul > a {
     text-decoration: none;
     padding: 25px 20px;
     margin-bottom: 20px;
     width: 70%;
     list-style: none;
     display: flex;
     justify-content: space-between;
     border: 1px solid #d3cccc;
     border-radius: 13px;
     font-size: larger;
      }

       ul > li > a {
       text-decoration: none;
       color: Black;
        }
       ul > li > a:hover {
       text-decoration: underline;
        }
         `;
          `

【讨论】：