Question

所以我有这种情况：

<div class="relations-container">
    <div class="relations">
    <ul>
      <? while($relatedVideo = mysql_fetch_array($relatedVideos)){ ?>
    <li><p><a href="?prodId=<?=$relatedVideo['recProductId']?>"><?
            =$relatedVideo['recTitle']?></a></p></li>
      <? } ?>
    </ul>
    </div>
         <? } ?>
     <div class="relations-button">
     </div>
</div>

所以我有我的容器div“relations-container”，其中包含我的2个子divs“relations”和“relations-button”

我的css如下：

.relations-container{
height:82px;
width:auto;
position:relative;
bottom:456px;
float:left;
}

.relations {

width:720px;
height:50px;
background: rgb(255, 255, 255);
border:dotted #333 1px;
float:left;
position:relative;

}

.relations ul {
    list-style: none;
}
.relations ul li{
margin-left:10px;
width:20%;
float:left;
}

.relations ul li p {

font-family: verdana;
font-size:10px;
color:#666;
}

.relations-button{
height:30px;
width:30px;
background-color:rgb(0, 51, 153);
float:left;

}

我想在这里实现的是当我将鼠标悬停在div“关系按钮”上时，这会将div“关系”向下移动50px。所以我认为这将是：

.relations-button:hover + .relations{
position:relative;
top:50px
}

有谁知道为什么div不动？

Answer 1

您必须使用jQuery（JavaScript）来实现您想要实现的目标。

$('.relations-button').hover(
function()
{
    $('.relations').css('top', '50');
},
function()
{
    $('.relations').css('top', '0');
});

以下是一个实例，展示它如何帮助您更好地理解：http://jsfiddle.net/RxB9G/1/

为什么我的另一个孩子不会继续悬停？

1 个答案: