javascript - 如何停止悬停过渡中元素的重叠？

标签 javascript html css

在我的网站中，我希望能够允许用户将鼠标悬停在图像上并通过过渡来放大图像。我已经成功地实现了过渡，但是，当放大图像时，它会不断地与其他元素重叠。我当前的布局是在网格中排序的，并且容器已被赋予属性溢出:隐藏。

我尝试在每个元素悬停时为其分配 z-index 值 -1，但是各层之间存在连续的变化，这看起来很糟糕。如何允许每个图像放大而不与任何其他元素重叠？

这是我的jsfiddle:https://jsfiddle.net/Syed213shah/4u0vh5Lb/ 

body {
  background-color: #800020;
}

body, html {
  height: 100%;
  margin: 0;
}



  #box-container {
    display: flex;
    height: 600px;
    width: 75%;

  }

.container {
  min-height: 500px;
  width: 100%;
  display: grid;
  grid-template-columns: 50% 2fr;
  grid-template-rows: 50% 2fr;
  overflow: hidden;
  position: static;

}

.item1 { 
  background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
  width: 100%;
  height: 200%;
  transition: all 0.5s ease-in-out; 
  position: relative;

}

.item1:hover {
   transform: scale(1.1); 
   z-index: -1;

}


.item2 { 
  background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  height: 400px;
  transition: all 0.5s ease-in-out; 
  position: relative;


}

.item2:hover {
   transform: scale(1.1); 
   z-index: -1;
}

.item3 {
  background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 400px;
  transition: all 0.5s ease-in-out; 
  position: relative;


}

.item3:hover {
   transform: scale(1.1);
   z-index: -1;

}

最佳答案

我认为使用伪元素或内部标签(根据需要)并使用 <a> 设置其父级(我们的 overflow:hidden; )缩放此元素更简单以防止您的错误。

在我的示例中，我使用了伪元素。我将这些代码行添加到您的 CSS 中(我还注释了一些行):

.container a {
  overflow: hidden;
}

.container a::after {
  height:100%;
  width:100%;
  content: "";
  position: absolute;
  transition: all 0.5s ease-in-out; 
  z-index:-1;
}

.item1::after{
  background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
}

.item2::after{
  background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
}

.item3::after{
  background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
}

.container a:hover::after{
  transform: scale(1.1);
}

我没有碰你的 HTML。

body {
  background-color: #800020;
}

body, html {
  height: 100%;
  margin: 0;
}

#box-container {
  display: flex;
  height: 600px;
  width: 75%;
}


/* https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg  */

/* https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000 */

/* https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg */


.container {
  min-height: 500px;
  width: 100%;
  display: grid;
  grid-template-columns: 50% 2fr;
  grid-template-rows: 50% 2fr;
  overflow: hidden;
  position: static;
}

.item1 { 
  /*background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');*/
  width: 100%;
  height: 200%;
  /*transition: all 0.5s ease-in-out;*/ 
  position: relative;
}

/*.item1:hover {
   transform: scale(1.1); 
   z-index: -1;
}*/

.item2 { 
  /*background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');*/
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  height: 400px;
  /*transition: all 0.5s ease-in-out; */
  position: relative;
}

/*.item2:hover {
   transform: scale(1.1); 
   z-index: -1;
}*/

.item3 {
  /*background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');*/
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 400px;
  /*transition: all 0.5s ease-in-out; */
  position: relative;
}

/* -------------------------- */
/* I added these lines of code */
/* -------------------------- */

.container a {
  overflow: hidden;
}

.container a::after {
  height:100%;
  width:100%;
  content: "";
  position: absolute;
  transition: all 0.5s ease-in-out; 
  z-index:-1;
}

.item1::after{
  background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
  
  /*to set a background without repetition and always horizontally center you could use also this syntaxt:
  background: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg') 50% top no-repeat transparent;
  */
}

.item2::after{
  background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
}

.item3::after{
  background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
}

.container a:hover::after{
  transform: scale(1.1);
}

/* -------------------------- */
/* I added these line of code */
/* -------------------------- */

.item1 h2 {
  font-size: 50px;
  position: absolute;
  font-family: Staatliches;
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 500px 70px;
}

.item2 h2 {
  font-size: 50px;
  position: absolute;
  font-family: Staatliches;
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 200px 200px;
}

.item3 h2 {
  font-size: 50px;
  position: absolute;
  font-family: Staatliches;
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 185px 200px;
}

.full-height {
  height: 100%;
}
.bottom-height {
  height: 100%;
}

h1 {
  font-size: 50px;
  font-family: Staatliches;
  text-align: center;
  color: #002a58;
}

#navbar {
  background-color: #800020;
  position: fixed;
  top: -30px;
  width: 100%;
  transition: top 0.3s;
}

#navbar ul {
  height: -30px; 
  padding: 10px 0 10px 40px; 
  width: 100%; 
}

#navbar li{
  float: left;
  line-height: 20px;
  margin-right: 30px;
  padding: 10px 3px;
  position: relative;
  list-style-type: none;
}

#navbar li a {
  font-family: Staatliches;
  text-decoration: none;
  color: rgb(13, 11, 134);
}

#navbar li a:hover {
  background-color: #ddd;
  color: black;
}
<body>
   <div class="full-height">
      <script src="script.js"></script>
      <div class="container">
         <a class="item1" href="https://www.bbc.co.uk/sport/football" style="text-decoration: none;" >
            <h2> Europe's biggest stadium  </h2>
         </a>
         <a class="item2" href="https://www.fcbarcelona.com/en/" style="text-decoration: none;" >
            <h2>European Success</h2>
         </a>
         <a class="item3" href="https://www.fcbarcelona.com/en/football/first-team/news" style="text-decoration: none;" >
            <h2>Current Squad</h2>
         </a>
      </div>
      <div id="navbar">
         <ul>
            <li><a href="https://first-website.awais.repl.co/">Home</a></li>
            <li><a href="news.asp">Squad</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">About</a></li>
            <a2><a>Created by Awais</a></a2>
         </ul>
      </div>
      <h1>FC Barcelona</h1>
   </div>
   <div class="bottom-height">
   </div>
</body>

关于javascript - 如何停止悬停过渡中元素的重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58803650/

上一篇：html - 在没有实际定义的情况下使用自定义元素是否危险？

下一篇：jquery - 如果 currentTime 大于 X，则 HTML5 视频运行一次事件

相关文章：

javascript - node.js:如何在 forEach 循环中使用异步调用实现路由方法？

javascript - 从 JSON 文件中提取字段

html - XHTML 严格 : br tag inside p tag

javascript - 日期选择器 javascript 和电子邮件检查 ajax java 脚本错误

javascript - 如何使用 Javascript 或 Jquery 正确旋转这个立方体？

javascript - jQuery 事件不绑定(bind)

javascript - 显示/隐藏多个 Div

javascript - svg-insertAdjacentHTML 不适用于 firefox 35 及以下版本？

css - 使用 LESS 的媒体查询中嵌套混合的可能错误

css - 移动设备上触摸屏幕边缘的元素(Material UI)

©2024 IT工具网  联系我们