Question

我正在面对这个问题。我想将一个div字段彼此对齐。当用户将鼠标悬停在div上时，div会更改其背景颜色并变大。这样，它也应该位于它旁边的div上方。但是它并没有做到这一点。

我尝试了不同的方法，例如将z-index从 .thin 设置为1000，将.thin:hover的设置为1200，并尝试将位置更改为绝对位置，使其位于其他位置之上，但漂浮在左侧。

body {
    margin: 0px;
    padding: 20px;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    z-index: -1;
    position:relative;
}
.tiles{
    width: 100%;
    height: 100%;
    align-content: center;
}
.thin {
    width: 150px;
    height: 150px;
    background-color: #EFF0F1;
    margin: 3px;
    float: left;
    border-radius: 3px;
    display: table;
}

    .thin:hover {
        width: 190px;
        height: 190px;
        background-color: #01A3EE;
        margin: -13px;
        float: left;
        border-radius: 3px;
        -webkit-transition: background-color 300ms linear, margin 600ms linear, width 600ms linear, height 600ms linear;
        -ms-transition: background-color 300ms linear, margin 600ms linear, width 600ms linear, height 600ms linear;
        transition: background-color 300ms linear, margin 600ms linear, width 600ms linear, height 600ms linear;
    }
    
    p {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

<html>
<head>
    <base target="_parent">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="CSS/style.css" rel="stylesheet" type="text/css" />
    <title></title>
    <meta>
    <meta>
</head>
<body onfocusout="" style="" onload="">
    <div id="" class="tiles">
        <div id="" class="thin">
            <p id="">Residential Property</p>
        </div>
        <div id="" class="thin">
            <p id="">Sales Lead</p>
        </div>
        <div id="" class="thin">
            <p id="">Sales Opportunity</p>
        </div>
        <div id="" class="thin">
            <p id="">Purchase Lead</p>
        </div>
        <div id="" class="thin">
            <p id="">Purchase Opportunity</p>
        </div>
    </div>
</body>
</html>

因此，如何在不将div移动到其他位置的情况下使div与周围的div重叠。

我希望有人可以帮助解决我的问题。非常感谢你。

Answer 1

这是有效的示例：JsFiddle

.container {
  display: flex;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background: #ccc;
  cursor: pointer;
  margin: 5px;
  transition: all .4s;
}

.item:hover {
  background-color: tomato;
  transform: scale(1.3);
}

<div class="container">
  <div class="item">
    some text
  </div>
  <div class="item">
    some text
  </div>
  <div class="item">
    some text
  </div>
  <div class="item">
    some text
  </div>
</div>

Answer 2

z-index仅适用于定位的元素-下面，我将您的框设为相对，并在悬停时添加了较高的z-index

使元素悬停时不移动的唯一方法是使用变换并缩放它们，而不是更改其物理宽度和高度。

body {
  margin: 0px;
  padding: 20px;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

.tiles {
  width: 100%;
  height: 100%;
  align-content: center;
}

.thin {
  width: 150px;
  height: 150px;
  background-color: #EFF0F1;
  margin: 3px;
  float: left;
  border-radius: 3px;
  display: table;             
                                     /* added below 2 lines */
  z-index: 1;
  position: relative;
}

.thin:hover {
  background-color: #01A3EE;
  transform: scale(1.2);              /* change the width and height to a scale transformation so element doesn't move on resize, also no need to repeat items declared in .thin, unless you need to override them */
  
  z-index: 2;                         /* add this */
  -webkit-transition: background-color 300ms linear, transform 600ms linear;
  -ms-transition: background-color 300ms linear, transform 600ms linear;
  transition: background-color 300ms linear, transform 600ms linear;
}

p {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

<html>

<head>
  <base target="_parent">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="CSS/style.css" rel="stylesheet" type="text/css" />
  <title></title>
  <meta>
  <meta>
</head>

<body onfocusout="" style="" onload="">
  <div id="" class="tiles">
    <div id="" class="thin">
      <p id="">Residential Property</p>
    </div>
    <div id="" class="thin">
      <p id="">Sales Lead</p>
    </div>
    <div id="" class="thin">
      <p id="">Sales Opportunity</p>
    </div>
    <div id="" class="thin">
      <p id="">Purchase Lead</p>
    </div>
    <div id="" class="thin">
      <p id="">Purchase Opportunity</p>
    </div>
  </div>
</body>

</html>

Answer 3

我认为您可以使用scale(1.1);来成长div，这是解决有需要的事情的简单得多的方法。您只需要更新:hover

的CSS

    .thin:hover {
       transform: scale(1.1);
       background-color: #01A3EE;
       float: left;
       border-radius: 3px;
       transition: all 0.3s linear;
     }

用户将鼠标悬停在其上时，如何使div与周围的div重叠？

3 个答案: