0

所以我有这种情况：

<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 个子 div “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 不移动？

4

1 回答 1

0

您将不得不使用 jQuery (JavaScript) 来实现您想要实现的目标。

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

这是一个活生生的例子来展示它是如何工作的，以便更好地理解：http: //jsfiddle.net/RxB9G/1/

于 2013-08-08T12:10:01.213 回答