Question

大家早上好。我正在创建一个网站，但我无法理解，只要将鼠标悬停在＆＃34; li＆＃34;上就可以更改div大小。在这个页面中，我有一个包含不同元素的菜单，我想根据所选元素调整透明框的大小。例如，除了最后一个（蓝色）之外，我希望为所有元素保留相同的维度，将框尺寸从250px增加到350px。这是主要的HTML代码：
...

<div class="menu_main">
            <ul class="menu slide">
            <li><a href="...." class="orange">NAME2</a></li>
            <li><a href="...." class="blue">NAME1</a></li>

    </ul>
    <div class="box"></div>
    </div>

...

CSS代码是：

.....

.menu_main {
    float:left;
    font:normal bold 11px/35px verdana, sans-serif;
    overflow:hidden;
    position:relative;
    left:50px;
}


.menu_main .box {
    -moz-transition-duration:.4s;
    -o-transition-duration:.4s;
    -webkit-transition-duration:.4s;
    background-color:rgba(255, 250, 250, 0.5);
    height:0;
    width:900px;
}
.menu_main:hover div.box {
    height:250px;
}

...

.ul.menu li a.blue:hover,ul.menu li:hover a.blue {
    background:#c00;

}

...

非常感谢你的关注。我希望我一直很清楚

Answer 1

.main_menu:hover .blue {
    width: 350px;
    transition: width 1s;
}

Answer 2

我建议使用<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>在您的头部中包含jQuery，这将允许您使用以下代码来实现您想要做的事情：

$('.blue').hover(function() {
$('.box').css(width: '350px');},
function() {
$('.box').css(width: '250px');};);

将鼠标悬停在<li> </li>上时更改div大小

2 个答案: