我用“ HTML”和“ Less CSS”创建了一个小型网站。
[请看那里，他们为什么一起走下去？
CodePen.io (My Test HTML - CSS)
当用户将鼠标悬停在每张卡上时，我希望同一张卡向下移动，但它们都一起向下移动。
我现在该怎么办？
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="Contaner">
<img src="https://www.0ta100it.com/wp-content/uploads/CSS-1200x480.png" width="300px">
<div class="info">
<h2>Learn CSS</h2>
<p>CSS is a language for design HTML codes. Its Just a very very very very very very very very long text</p>
</div>
</div>
<div class="Contaner">
<img src="https://hanet.ir/wp-content/uploads/2017/05/1500x500-773x350.jpg" width="300px">
<div class="info">
<h2>Learn HTML</h2>
<p>HTML is a hyper text markup language for insert web page elements. Its Just a very very very very long text</p>
</div>
</div>
<div class="Contaner">
<img src="https://www.javascript.ba/system/posts/images/000/000/001/original/javascript.jpg" width="300px">
<div class="info">
<h2>Learn JS</h2>
<p>JavaScript is a FAMOUS Client Side Programing Language. Its Just a very very very very very very very long text</p>
</div>
</div>
</body>
</html>
您应该在hover标签上使用img，所要做的是将鼠标悬停在整个图像上。
更改此
&:hover {
margin-top: 10px;
}
to
img:hover {
margin-top: 10px;
}
用display:flex;用更大的容器包装所有东西>
就像这里，在您的CSS中添加.big-container {display: flex;}
并且如果您仍然希望元素之间的距离
将margin-right: 5px;添加到您的Contaner类中<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="big-container">
<div class="Contaner">
<img src="https://www.0ta100it.com/wp-content/uploads/CSS-1200x480.png" width="300px">
<div class="info">
<h2>Learn CSS</h2>
<p>CSS is a language for design HTML codes. Its Just a very very very very very very very very long text</p>
</div>
</div>
<div class="Contaner">
<img src="https://hanet.ir/wp-content/uploads/2017/05/1500x500-773x350.jpg" width="300px">
<div class="info">
<h2>Learn HTML</h2>
<p>HTML is a hyper text markup language for insert web page elements. Its Just a very very very very long text</p>
</div>
</div>
<div class="Contaner">
<img src="https://www.javascript.ba/system/posts/images/000/000/001/original/javascript.jpg" width="300px">
<div class="info">
<h2>Learn JS</h2>
<p>JavaScript is a FAMOUS Client Side Programing Language. Its Just a very very very very very very very long text</p>
</div>
</div>
</div>
</body>
</html>