0
我有一個查詢志願者人員姓名和詳細信息的PHP查詢。這些按照從左到右的順序顯示爲縮略圖。在懸停時，他們使用css來緩解顯示細節。我怎樣才能讓div保持固定，並將div的任何一方移動到懸停位置
<?php while($fetch = $result->fetch_assoc()) {
$Name =str_replace('-',' ',$fetch['Name']);
$About =str_replace('-',' ',$fetch['About']);
$id = $fetch['id'];
$Thumb = $fetch['Thumbnail'];
$class++;
if ($class == $max) {
$class =0;
}
if ($class > 5) {
$id = ("thumbnail_r"); //changes to id so the thumb floats right
}
else if($class < 6) {
$id = ("thumbnail_l");//changes to id so the thumb floats left
}
?>
<div id="thumb_w"><p><?php echo '<img src="staff/'.$Thumb.'" alt="'.$Name.'" width="100px" height="100px" id="'.$id.'"/>';?>
<?php echo $Name?>
<?php echo $About?></p>
</div>
<?php
}
} else {
echo "0 results";
}
隨着css。
#thumb_w{
border: 6px inset #0c3af0;
-webkit-box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
-moz-box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
height: 111px;
width: 111px;
margin: 3px;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
overflow:hidden;
background-color: rgb(160, 156, 250);
float: left;
}
#thumb{
z-index:1;
border: 6px inset #0c3af0;
-webkit-box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
-moz-box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
transition:1.5s ease-in-out;
height: 121px;
}
#thumb_w:hover {
width: 500px;
height: auto;
max-height: 111px;
z-index: 10;
position: absolute;
display: inline-block;
max-height: 111px;
}
img#thumbnail{
max-width: 108px;
width: -webkit-fill-available;
height: auto;
min-height: 99px;
max-height: 120px;
}
#thumbnail_l{
float: left;
clear: both;
}
#thumbnail_r{
float: right;
clear: both;
}
有沒有讓你徘徊在保持固定和所有其他縮略圖滑開縮略圖的方式。它不一定是CSS，這正是我所用的。