当我测试悬停效果和过渡效果时，但它不起作用。我找不到任何问题。请帮我。我现在应该怎么做。 什么问题？？
<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;
}
最佳答案
我相信您缺少同级选择器:
.test a:hover ~ .images {
display: none;
}
片段:
.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;
}<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>如果你想在 left 上应用 transition:
.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;
}<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>文档:
关于html - 我对悬停和过渡效果有一些疑问，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49989568/