Question

首先，说我试图通过以前的帖子找到我的问题的答案，但是找不到适合我特定问题的任何内容。另外提一下我是初学者，上周开始学习，但我非常渴望学习。

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

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

如果有些事情无法完成，我会接受一些JavaScript，但我还没有开始学习它。

提前感谢您的帮助。

＆＃13;

@-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;
}

＆＃13;

<!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>

＆＃13;

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

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

1 个答案: