悬停转换的一般问题

时间：2016-06-03 15:16:26

标签： jquery html css hover transitions

我在悬停过渡方面遇到了一些麻烦。我有一个13个图像的全宽条。当您将鼠标悬停在它们上方时，会显示一些文字，具体取决于您悬停在哪一个上。我想减慢过渡时间，并使图像在图像向上滑动的同时变得不透明（目前它向上滑动然后变得不透明）。如果可能的话，保持图像保持畅通并且＃34;直到其他一个图像悬停。还有一件事，如果你徘徊在图像底部附近并向左或向右移动光标，它会有点紧张，希望这也可以修复。

到目前为止，我在此页面上发表了什么：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>

2 个答案:

答案 0 :(得分：1)

这两个过渡同时发生。看起来滑动后颜色发生了变化，因为过渡时间是随着时间的推移发生的，而不是立即滑动。

如果您想要使转换速度变慢，只需将transition属性中的值从1000ms更改为更高的值。你可以使用＆＃39;几秒钟，例如。 1s，2s等。

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

聚苯乙烯。下次遇到这样的问题时，请使用codepen或类似的在线代码查看器。通过这种方式提供帮助要容易得多。

答案 1 :(得分：0)

因此，两个动画同时未激活的主要原因是transition仅在非悬停状态具有定义的属性时才有效，该属性将在hover中设置动画州。在您的情况下，您错过了top属性的初始声明（因此它不是动画）。我调整了一些东西来代替使用transform，因为这提供了更平滑的过渡。

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

通过查看标记后，有一些好的经验法则：

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