悬停过渡的一般问题

Question

我在悬停过渡时遇到了一些问题。我有一个包含 13 张图像的全角条。当您将鼠标悬停在它们上方时，会出现一些文本，具体取决于您将鼠标悬停在哪一个上。我想减慢过渡时间，并使图像在图像向上滑动的同时变得不透明（目前它向上滑动然后变得不透明）。如果可能的话，让一张图片保持 "hovered" 直到其他图片之一悬停会很好。还有一件事，如果您将鼠标悬停在图像底部附近并向左或向右移动光标，它会变得有点紧张，希望这也可以解决。

到目前为止我所拥有的在这个页面上：http://homeinspectioncarync.com/testpage/

以下是我用过的CSS和HTML。抱歉单行 HTML，我不太明白如何在此处正确设置格式。它遵循相同的模式，但 img1 /img p1 /p img2 /img p2 /p 等等，直到达到 13。我知道这里的社区很棒，所以任何帮助都将不胜感激！

CSS:

.images {
  height: 100px;
  width: 100px;
  position: absolute;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.images:hover {
  opacity: 0.5;
  top: -10px;
}

.para {
  position: absolute;
  left: 600px;
  top: 200px;
  font-size: 200%;
  visibility: hidden;
}

#one:hover + #pone {
  visibility: visible;
}

#two:hover + #ptwo {
  visibility: visible;
}

#three:hover + #pthree {
  visibility: visible;
}

etc. (until 13)

HTML:

<img src = "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/00c/2ab/35ae340.jpg" class = "images" id = "one"></img>
<p class = "para" id = "pone">1</p>
<img src = "http://homeinspectionraleighnc.com/wp-content/uploads/2010/11/Glenns-Photo-1.png" class = "images" id = "two" style = "left: 100px;"></img>
<p class = "para" id = "ptwo">2</p>
<img src = "https://scontent-sjc2-1.xx.fbcdn.net/v/t1.0-1/p160x160/18718_2753855091076_8128390731521222770_n.jpg?oh=d1d49aea28d3cb6ff76033db1ae056ba&oe=57D998E2" class = "images" id = "three" style = "left: 200px;"></img>
<p class = "para" id = "pthree">3</p>
<img src = "https://scontent-sjc2-1.xx.fbcdn.net/v/t1.0-1/c22.22.272.272/s160x160/166620_1817593049535_5878435_n.jpg?oh=78d8a42398b126fc1f75d1b32295029a&oe=57D73E8C" class = "images" id = "four" style = "left: 300px;"></img>
<p class = "para" id = "pfour">4</p>
<img src = "http://homeinspectioncarync.com/wp-content/uploads/2016/05/trevor-e1464897672300.jpg" class = "images" id = "five" style = "left: 400px;"></img>
<p class = "para" id = "pfive">5</p>
<img src = "http://homeinspectioncarync.com/wp-content/uploads/2016/05/betterrob-e1464897851528.jpg" class = "images" id = "six" style = "left: 500px;"></img>
<p class = "para" id = "psix">6</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class = "images" id = "seven" style = "left: 600px;"></img>
<p class = "para" id = "pseven">7</p>
<img src = "https://scontent-sjc2-1.xx.fbcdn.net/v/t1.0-9/12373154_1629529113976977_749911928470317591_n.jpg?oh=70dc625bdbd6c6e35406f47cc02bd82e&oe=57D42D84" class = "images" id = "eight" style = "left: 700px;"></img>
<p class = "para" id = "peight">8</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class = "images" id = "nine" style = "left: 800px;"></img>
<p class = "para" id = "pnine">9</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class = "images" id = "ten" style = "left: 900px;"></img>
<p class = "para" id = "pten">10</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class = "images" id = "eleven" style = "left: 1000px;"></img>
<p class = "para" id = "peleven">11</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class = "images" id = "twelve" style = "left: 1100px;"></img>
<p class = "para" id = "ptwelve">12</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class = "images" id = "thirteen" style = "left: 1200px;"></img>
<p class = "para" id = "pthirteen">13</p>

Answer 1

这两个转变同时发生。看起来颜色的变化是在向上滑动之后发生的，因为过渡时间是随着时间的推移而发生的，而不是随着幻灯片立即发生。

如果你想让过渡变慢，只需将过渡属性中的值从 1000 毫秒更改为更高的值。您也可以使用 's' 几秒钟，例如。 1 秒、2 秒等

此外，不要为每个图像的每个 ID 创建单独的 CSS 定义，而是使用可以应用于所有图像的 class，因为它们都具有相同的行为。

Ps。下次遇到此类问题时，请使用 codepen 或类似的在线代码查看器。以这种方式提供帮助要容易得多。

Answer 2

所以两个动画没有同时激活的主要原因是 transition 仅在非悬停状态定义了属性时才有效，该属性将在 hover状态。在您的情况下，您缺少 top 属性的初始声明（因此这不是动画）。我稍微调整了一下，改为使用 transform，因为这提供了更平滑的过渡。

我还将每个图像和段落包装在一个容器中（这将解决您看到的抖动问题），因为图像将独立于容器进行动画处理，并且不会处理悬停事件。此外，我清理了相当多的标记。请参阅下面我的评论以了解那里的最佳做法。

.image-container {
  position: relative;
  margin: 0;
  display: inline-block;
}
  
.images {
  height: 100px;
  width: 100px;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  transition: all 1000ms ease;
}

.image-container:hover .images {
  opacity: 0.5;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}

.para {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  font-size: 200%;
  opacity: 0;
  transition: all 1000ms ease;
}

.image-container:hover .para {
  opacity: 1;
}

<div class="image-container">
  <img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/00c/2ab/35ae340.jpg" class="images">
  <p class="para">1</p>
</div>
<div class="image-container">
  <img src="http://homeinspectionraleighnc.com/wp-content/uploads/2010/11/Glenns-Photo-1.png" class="images">
  <p class="para">2</p>
</div>
<div class="image-container">
  <img src="https://scontent-sjc2-1.xx.fbcdn.net/v/t1.0-1/p160x160/18718_2753855091076_8128390731521222770_n.jpg?oh=d1d49aea28d3cb6ff76033db1ae056ba&oe=57D998E2" class="images">
  <p class="para">3</p>
</div>
<div class="image-container">
  <img src="https://scontent-sjc2-1.xx.fbcdn.net/v/t1.0-1/c22.22.272.272/s160x160/166620_1817593049535_5878435_n.jpg?oh=78d8a42398b126fc1f75d1b32295029a&oe=57D73E8C" class="images">
  <p class="para">4</p>
</div>
<div class="image-container">
  <img src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/trevor-e1464897672300.jpg" class="images">
  <p class="para">5</p>
</div>
<div class="image-container">
  <img src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/betterrob-e1464897851528.jpg" class="images">
  <p class="para">6</p>
</div>
<div class="image-container">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class="images">
  <p class="para">7</p>
</div>
<div class="image-container">
  <img src="https://scontent-sjc2-1.xx.fbcdn.net/v/t1.0-9/12373154_1629529113976977_749911928470317591_n.jpg?oh=70dc625bdbd6c6e35406f47cc02bd82e&oe=57D42D84" class="images">
  <p class="para">8</p>
</div>
<div class="image-container">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class="images">
  <p class="para">9</p>
</div>
<div class="image-container">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class="images">
  <p class="para">10</p>
</div>
<div class="image-container">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class="images">
  <p class="para">11</p>
</div>
<div class="image-container">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class="images">
  <p class="para">12</p>
</div>
<div class="image-container">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png" class="images">
  <p class="para">13</p>
</div>

查看您的标记后，有几条很好的经验法则：

仅在绝对必要时才使用 ID（如果您使用 JavaScript 来定位它们，并且如果真的只有一个的话）。
谨慎使用绝对定位。使用您的原始代码，创建响应式页面几乎是不可能的，因为所有元素都卡在一个地方。相反，保持流中的父元素和绝对元素紧密耦合。
确保 html 属性在语法上是正确的。你在写 class = "images"。更新至 class="images".
没有内联样式。这使得以后更新页面变得非常困难。

悬停过渡的一般问题

General Problems with Hover Transitions

html

css

jquery

hover

transitions