Question

我的盒子里装满了MySQL数据。当鼠标悬停在一个方框上方时，它会变大，但下面一行的方框会在页面上移动。我很确定这是由于重叠的元素，但我不知道如何解决这个问题，因为它们在技术上都是一个元素。

CSS

.boxed {
    border: 5px solid blue;
    margin-left:30px;
    margin-top:10px; 
    height: 120px;
    width: 200px;
    border-style: double;
    text-overflow: ellipsis;
    float:left; 
}
.boxed:hover{
    height: 150px;
    width: 250px;
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 20px #ccc;
    box-shadow: 0 0 20px #888888;
    border-style: double;
    text-overflow: ellipsis;
}

PHP

<?php
    $dbhost = 'localhost';
    $dbuser = 'root';
    $dbpass = '';
    $selection = "ORDER BY  id ASC";

    $conn = mysql_connect($dbhost, $dbuser, $dbpass);
    if(!$conn) {
      die('Could not connect: ' . mysql_error());
    }

    $selection = isset($_GET['sort']) ? $_GET['sort'] : "";
    if ($selection == "1") {
        $selection = "ORDER BY id DESC";
    } else if ($selection == "2") { 
        $selection = "ORDER BY id ASC";
    }

    $sql = "SELECT id, threadName, message FROM threads ";
    $sql .= $selection;

    mysql_select_db('threads');
    $retval = mysql_query($sql, $conn);

    if(!$retval) {
      die('Could not get data: ' . mysql_error());
    }

    while($row = mysql_fetch_array($retval, MYSQL_ASSOC)) {
      $id = $row['id'];
      $threadName = $row['threadName'];
      $message = $row['message'];
      echo "<div class='boxed'><center>".$threadName."<br>".$message."</center></div>";
    }
?>

Answer 1

给你不想在绝对定位周围推送其他内容的盒子，然后用边缘将周围的块空间隔开，这样绝对定位的盒子似乎与它们一起流动：

＆＃13;

.boxed {
    border: 5px solid blue;
    margin-left: 30px;
    margin-top: 10px;
    height: 120px;
    width: 200px;
    border-style: double;
    text-overflow: ellipsis;
    float: left;
    position: absolute;
    top: 0;
    background: white;
}

.boxed:hover {
    height: 150px;
    width: 250px;
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 20px #ccc;
    box-shadow: 0 0 20px #888888;
    border-style: double;
    text-overflow: ellipsis;
}

.below {
    margin-top: 12px;
}

.side {
    margin-left: 246px;
    border: .125em solid;
    width: 200px;
    height: 100px;
    background: white;
    padding:10px;
}

＆＃13;

<div class="boxed"></div>
<div class="side">
    this box isn't getting bumped
</div>
<div class="below">
    this text isn't getting bumped
</div>

＆＃13;

更新：

对于重复代码（即来自PHP foreach循环），可以使用间隔块来区分盒装块，并且在悬停时，jQuery添加＆＃34; hover＆＃34;类到适当的spacer块，它给它一个样式规则z-index:3（和position:relative来激活z-index规则）：

＆＃13;

$('.boxed').mouseover(function() {
    $('.spacer').removeClass('hover');
    $(this).closest('.spacer').addClass('hover');
});

＆＃13;

.spacer {
    width: 210px;
    height: 130px;
	display:inline-block;
}

.spacer.hover {
    position: relative;
    z-index: 3;
}

.boxed {
    border: 5px solid blue;
    height: 120px;
    width: 200px;
    border-style: double;
    text-overflow: ellipsis;
    float: left;
    top: 0;
    background: white;
}

.boxed:hover {
    height: 150px;
    width: 250px;
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 20px #ccc;
    box-shadow: 0 0 20px #888888;
    border-style: double;
    text-overflow: ellipsis;
}

.below {
    margin-top: 12px;
}

.side {
    margin-left: 246px;
    border: .125em solid;
    width: 200px;
    height: 100px;
    background: white;
    padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="spacer">
    <div class="boxed"></div>
</div><div class="spacer">
    <div class="boxed"></div>
</div>

＆＃13;

重叠元素Bug

1 个答案: