仅使用 CSS 将鼠标悬停在另一个 div 上时，如何保持悬停状态处于活动状态

Question

首先，假设我试图通过以前的帖子找到我的问题的答案，但找不到任何适合我的具体问题的东西。另外提一下，我是这方面的初学者，上周刚开始学习，但我非常渴望学习。

话虽如此，我有以下问题：

在仅使用 CSS 将鼠标悬停在 option1 或 option2 上后，如何使 Logo1（图片）保持不透明度 1.0（其自然不透明度为 0.5）？在我离开 Logo1、option1 或 option2 后，它应该回到不透明度 0.5。 还提到当鼠标悬停在 Logo1 上时会出现 Option1 和 Option2。

如果是不能做的事情，我接受一些JavaScript，但我还没有开始学习。

提前感谢您的所有帮助。

@-webkit-keyframes fadeInText {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes fadeInText {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-webkit-keyframes fadeInLogo {
    from { opacity: 0.5; }
      to { opacity: 1; }
}

@keyframes fadeInLogo {
    from { opacity: 0.5; }
      to { opacity: 1; }
}

.container {
position:relative;
}

ul {
 list-style-type:none;
}

.logo1 {
 left:20px;
 top:30px;
 position:absolute;
 opacity:0.5;
}
 .linea1 {
 display:none;
 position:absolute;
 left:70px;
 top:50px;
}
.logo1:hover+.linea1,.linea1:hover {
 display:block;
 -webkit-animation: fadeInText 1.5s;
 animation: fadeInText 1.5s;
}
.logo1:hover{
 display:block;
 -webkit-animation: fadeInLogo 1.5s;
 animation: fadeInLogo 1.5s;
}

<!DOCTYPE html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="logo1">
    <img src="1.png">
</div>

<div class="linea1">
    <ul>
    <li><a href="#option1">Option1</a></li>
    <li><a href="#option2">Option2</a></li>
    </ul>
</div>
</body>
</html>

Answer 1

您只需使用 CSS 即可。将您的 :hover 伪类放在父容器上：

.container:hover .linea1 {
  display:block;
  -webkit-animation: fadeInText 1.5s;
  animation: fadeInText 1.5s;
}

.container:hover .logo1 {
  display:block;
  -webkit-animation: fadeInLogo 1.5s;
  animation: fadeInLogo 1.5s;
}

但更好的是，在这种情况下使用transition 而不是动画，因为只要您悬停，过渡状态就会保持不变。当您有多个关键帧时，动画会更有用。

.logo1 {
  left:20px;
  top:30px;
  position:absolute;
  opacity:0.5;
  transition: opacity 1.5s ease;
}
.linea1 {
  position:absolute;
  left:70px;
  top:50px;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.container:hover .linea1 {
  opacity: 1
}
.container:hover .logo1 {
  opacity: 1
}

codepen