Question

当我测试悬停效果以及过渡效果但它不起作用时。我找不到任何问题。请帮我。我现在应该怎么做。有什么问题??

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="test">
             <a href="#"><h1>This is header</h1></a>
             <div class="images"><img src="img/them.jpg" alt="" /></div>
        </div>
    </div>
</body>
</html>

的CSS

   .container{
    width:900px;
    margin: 0 auto;
}
.test{}
.test h1{
    font-size:30px;
    position:relative;
}
.images {
    width: 258px;
    position:absolute;
    right:100px;
    transition:.5s;
}
.images img{
    width:100%;
}
 .test h1:hover .images {
    left:0px;

}

Answer 1

我相信你错过了一个兄弟选择器：

.test a:hover ~ .images {
  display: none;
}

<强>片断：

＆＃13;

.container {
  width: 900px;
  margin: 0 auto;
}

.test {}

.test h1 {
  font-size: 30px;
  position: relative;
}

.images {
  width: 258px;
  position: absolute;
  right: 100px;
  opacity: 1;
  transition: opacity .5s;
}

.images img {
  width: 100%;
}

.test a:hover~.images {
  opacity: 0;
}

＆＃13;

<div class="container">
  <div class="test">
    <a href="#">
      <h1>This is header</h1>
    </a>
    <div class="images">
      <img src="http://via.placeholder.com/350x150" alt="" />
    </div>
  </div>
</div>

＆＃13;

如果您想在transition上应用left：

＆＃13;

.container {
  width: 900px;
  margin: 0 auto;
}

.test {}

.test h1 {
  font-size: 30px;
  position: relative;
}

.images {
  width: 258px;
  position: absolute;
  right: 100px;
  left: calc(100% - 358px);
  opacity: 1;
  transition: left .5s;
}

.images img {
  width: 100%;
}

.test a:hover~.images {
  left: 0px;
}

＆＃13;

<div class="container">
  <div class="test">
    <a href="#">
      <h1>This is header</h1>
    </a>
    <div class="images">
      <img src="http://via.placeholder.com/350x150" alt="" />
    </div>
  </div>
</div>

＆＃13;

<强>文档：

Answer 2

您的HTML与您编写的规则不匹配：

 .test h1:hover .images {
    display:none;
}

您可能会尝试做几件事：

 .test a:hover + .images {
    display:none;
}

当您悬停.images时，这会隐藏h1。但是，由于你的h1位于<a>之内，你需要删除它或在<a>上放一个类并引用它而不是h1。或者您可以移动h1内部的图像div，它将与现有规则匹配。

我有一些关于悬停和过渡效果的问题

2 个答案: