带有按钮的类似 Netflix 的悬停效果 [关闭]

Posted

技术标签:

【中文标题】带有按钮的类似 Netflix 的悬停效果 [关闭]【英文标题】：Netflix-like hover effect with buttons [closed] 【发布时间】：2020-12-08 07:17:12 【问题描述】：

如何创建 gif 所示的悬停效果？我现在能做的就是在悬停时放大它。如何在悬停时添加按钮和其他详细信息？

到目前为止我已经这样做了：

.Row_poster:hover  
   transform: scale(1.3);
   overflow: visible;
   cursor: pointer;
   z-index: 98;

【问题讨论】：

显示您尝试过的代码。 您应该使用“更新”标题下的代码更新您的问题，并在 cmets 中通知已进行更新。更容易理解您的整体问题。 如果您需要在鼠标悬停时显示按钮，那么您只需在默认情况下使这些按钮不可见，当您找到鼠标光标时，使这些按钮可见。一个肤浅的例子是.button display: none和selector:hover .button display: block 【参考方案1】：

嗨，严酷，

请看下面我整理的代码，看看这是否是您想要实现的目标，伙计。

$(document).ready(function () 
                $(document).on('mouseenter', '.transformar', function () 
                    $(this).find(".playButtons").show('slow');
                ).on('mouseleave', '.transformar', function () 
                    $(this).find(".playButtons").hide();
                );
            );
.transformar 
display:block;
height:150px;
transition: transform 2s;


.playButtonsdisplay: none

.transformar:hover
transform: scale(2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='transformar' align="center">

<img src="https://i.pinimg.com/originals/e1/d0/1b/e1d01b1b7f602d223afc747fcbced364.jpg"  >
<h2>Filme do Netflix</h2>
<div id="#botones" class="playButtons">
<button type="button">PLAY EPISODE</button>
</div>
</div>

【讨论】：

扩大规模不是问题。我希望悬停后显示灰色部分（所有按钮和文本）。 请重试代码，Harsh，我在阅读了您评论的详细信息后做了一个小调整。请点击整页链接查看效果。干杯！ 我没有确切地知道发生了什么我对 Stack O 有点陌生，但是我所做的只是帮助另一个人，就像我在需要答案时希望得到帮助一样，请吉特引导我解决这个问题，找到一个公正的解决方案。谢谢！【参考方案2】：

纯 CSS 方法

虽然使用javascript可以得到效果，但是这里有一些纯CSS的方法。

方法一：使用::after和::before。

阅读：

::after MDN 上 ::before MDN 上 

body,
html 
  height: 100%;
  width: 100%;
  background: #141414;
  margin: 0;
  padding: 25px;
  box-sizing: border-box;
  font-family: Lato, 'Segoe UI', Roboto, sans-serif;


.square 
  background-size: cover!important;
  background-position: center!important;
  display: inline-block;
  width: 150px;
  height: 100px;
  transition: transform 100ms ease-out, border-radius 200ms ease-out;


.square:hover 
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
  border-radius: 10px 10px 0 0;
  transform: scale(1.5);
  box-shadow: 0 0 2px #000a;


.square::after 
  position: relative;
  top: 100px;
  display: block;
  background: #18181818;
  box-shadow: 0 0 2px #000a;
  color: #fff;
  width: 150px;
  height: fit-content;
  padding: 5px;
  box-sizing: border-box;
  opacity: 0;
  border-radius: 0 0 10px 10px;
  transition: opacity 300ms ease-out, border-radius 200ms ease-out;


.square:hover::after 
  opacity: 1;


.square.one 
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;


.square.one:hover 
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;


.square.one::after 
  content: 'Never Gonna Give You Up!';

&lt;div class="square one"&gt;&lt;/div&gt;

如果您的字幕内容不是很定制，您应该更喜欢使用此方法。

方法2：使用单独的elements

无论您的字幕内容如何定制，这种方法都是最好的。

body,
html 
  height: 100%;
  width: 100%;
  background: #111;
  margin: 0;
  padding: 25px;
  box-sizing: border-box;
  font-family: Lato, 'Segoe UI', Roboto, sans-serif;


.square 
  width: 150px;
  height: 100px;
  transition: transform 100ms ease-out, border-radius 200ms ease-out;


.square .cover 
  width: 100%;
  height: 100px;
  border-radius: 10px 10px 0 0;
  background-size: cover!important;
  background-position: center!important;


.square .text 
  display: none;
  background: #181818;
  color: #fff;
  width: 100%;
  height: fit-content;
  padding: 5px;
  box-sizing: border-box;
  transition: opacity 300ms ease-out, border-radius 200ms ease-out;
  border-radius: 0 0 10px 10px;


.square:hover 
  border-radius: 10px;
  transform: scale(1.5);
  box-shadow: 0 0 2px #000a;


.square:hover .text 
  display: block;


.square.one .cover 
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;


.square.one:hover .cover 
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;

<div class="square one">
  <div class="cover"></div>
  <div class="text">
    Never Gonna Give You Up!
  </div>
</div>

结果

使用方法2。这看起来和gif很相似。

body,
html 
  height: 100%;
  width: 100%;
  background: #141414;
  margin: 0;
  padding: 25px;
  box-sizing: border-box;
  font-family: 'Segoe UI', Roboto, sans-serif;


.square 
  width: 150px;
  height: 100px;
  transition: transform 100ms ease-out, border-radius 200ms ease-out;


.square .cover 
  width: 100%;
  height: 100px;
  border-radius: 10px 10px 0 0;
  background-size: cover!important;
  background-position: center!important;


.square .text 
  display: none;
  background: #181818;
  color: #fff;
  width: 100%;
  height: fit-content;
  padding: 5px;
  box-sizing: border-box;
  transition: opacity 300ms ease-out, border-radius 200ms ease-out;
  border-radius: 0 0 10px 10px;


.square:hover 
  border-radius: 10px;
  transform: scale(1.5);
  box-shadow: 0 0 2px #000a;


.square:hover .text 
  display: block;


.square.one .cover 
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;


.square.one:hover .cover 
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;


.square .text .info 
  font-size: 8px;


.icons 
  display: flex;
  align-items: center;
  justify-content: space-between;


.icons :nth-child(3) 
  margin-left: auto;


.icons span
  border-radius: 50%;
  border: 1px solid #777;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  font-weight: 1000;
  overflow: hidden;


.rating 
  border: 0.1px solid white;
  padding: 1px 2px;
  

.match 
  color: green;
  font-weight: bold;

<div class="square one">
  <div class="cover"></div>
  <div class="text">
    <div class="icons">
      <span>:)</span>
      <span>O</span>
      <span>V</span>
    </div>
    <div class="info">
      <span class="match">98% Match</span>
      <span class="rating">18+</span>
      <span class="seasons">5 Seasons</span>
    </div>
  </div>
</div>

【讨论】：

以上是关于带有按钮的类似 Netflix 的悬停效果 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章

如何强制关闭悬停状态？

从网站重新创建按钮悬停效果

在悬停时展开带有动画的按钮

如何防止触摸设备上按钮的粘滞悬停效果

按钮悬停效果和触摸 (WPF)

如何防止触摸设备上按钮的粘滞悬停效果