Question

我想对元素悬停产生一些影响。但我似乎无法使其发挥作用。下面是我当前项目中的html结构和css

<!-- HTML ELEMENT STRUCTURE -->
<div class="do-share">
    <ul class="social-container">
       <li>one</li>
       <li>two</li>
       <li>three</li>
    </ul>
</div>

这是CSS

/* CSS file */
.do-share:hover > .social-container{
    opacity: 1;
    display: block;
    position: absolute;
    right: 0;
    list-style: none;
    margin: 0;
    top: -85px;
}
.social-container {
    display: none;
    opacity: 0;
    transition: all 2s linear;
}

但是对此的过渡效果不起作用。不确定我做错了什么

Answer 1

试试这个

    SELECT ISNULL(DATEDIFF(DAY,ET.EffectiveDate,ET2.EffectiveDate),DATEDIFF(DAY,ET.EffectiveDate,GETDATE())) DayDifference,
    ET.EmployeeID,ET.EffectiveDate 
     FROM(
        SELECT ROW_NUMBER() OVER (Partition By EmployeeId Order By EffectiveDate) RowNumber,EmployeeID,EffectiveDate 
        FROM  Employee.EmployeeTransfer
     )ET
    LEFT JOIN 
    (
        SELECT ROW_NUMBER() OVER (Partition By EmployeeId Order By EffectiveDate) RowNumber,EmployeeID,EffectiveDate 
        FROM  Employee.EmployeeTransfer
    ) ET2 ON ET.EmployeeID=ET2.EmployeeID AND ET.RowNumber=ET2.RowNumber-1
    ORDER BY ET.EmployeeID, DayDifference

.do-share:hover > .social-container{
    opacity: 1;
    display: block;
    position: absolute;
    left: 0;
    list-style: none;
    margin: 0;
    top: 5px;
}
.social-container {
    display: none;
    opacity: 0;
    transition: all 2s linear;

}
.do-share{
    min-height: 100px;
}

Answer 2

请尝试使用不透明度：

<html>

  <body>
    <div class="do-share">
      <ul class="social-container">
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ul>
    </div>
  </body>

</html>

和css代码：

body {
  color: #fff;
}

.do-share:hover .social-container {
  opacity: 0;
  transition: all 5s linear;
}

.social-container {
  opacity: 1;
  list-style: none;
  margin: 0;
  top: 5px;
  position: absolute;
  left: 0;
}

.do-share {
  min-height: 100px;
}

显示块上的悬停转换不起作用

2 个答案: