代码之家 › 专栏 › 技术社区 › Dakota dmg

javascript-onmouseover修改上一个元素css height

height html image css javascript

Dakota dmg · 技术社区 · 15 年前

我有两个沙发,我想相对控制它们的高度。这些div的要点是,当用户将鼠标移到其中一个上面时,它将垂直展开,另一个垂直收回(通过css转换平滑)。基本标记:

<div class="product">
    <h2>Product Name</h2>

    <div class="preview" style="background:url('/images/preview.png'); "></div>
    <div class="detail" style="background:url('/images/design.png'); "></div>

    <div class="product_info">
        <span class="quantity">7 Available</span>
        <span class="price">$19</span>
    </div>
</div>

这是使用从数据库中提取的唯一图像和其他数据生成的多次,因此这些图像只是占位符,但这不是问题所在。

以下是精简的CSS:

div.product {
    margin: 4px;
    padding: 4px;
    display: inline-block;
    width: 221px;
    height: 319px;
    box-shadow: 0 0 5px #ccc;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
}

div.product div.preview, div.product div.detail {
    height: 127px;
    width: 205px;
    margin: auto;
    margin-bottom: 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 0 5px #ccc;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    -moz-transition: 0.25s linear;
    -o-transition: 0.25s linear;
    -webkit-transition: 0.25s linear;
}

div.product div.detail:hover, div.product div.preview:hover {
    height: 254px;
}

div.product h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
}

div.product span.price {
    color: #B32B2B;
    font-weight: bold;
    font-size: 14px;
    text-align: right;
    float: right;
}

div.product span.quantity {
    text-align: left;
    float: left;
}

现在,我们的想法是,当您将鼠标移到任意一个图像上时,它会展开以填充另一个图像的空间,而另一个图像的空间会相应地收缩。这个标记不能在CSS中完成,也不能在我尝试过的任何东西中完成。

我需要在每一个div上使用javascript进行onMouseOver和previoussing来修改CSS高度。问题是,事情就是不想为我工作。有人有解决办法吗?

3 回复 | 直到 15 年前

Chris Cox 15 年前

首先,出于可访问性的原因,您可能希望使用onfocus和onblur,以考虑到某人可能没有使用鼠标这一事实。

我不知道你在使用什么JS,但我会把你推向jquery。博士论文 focus 在这里。

WSkid 15 年前

有几个JavaScript库将使这一过程变得简单。其中一个选项是jquery和jqueryui(两个单独的部分)。

类似这样(重新阅读问题后更新):

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style type="text/css">
.big {height:250px;}
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $('div.preview').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){curDiv.nextAll($('div.detail:first')).removeClass('big',1000);
            curDiv.addClass('big',1000);
            },function(){});
       });
        $('div.detail').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){curDiv.prevAll($('div.preview:first')).removeClass('big',1000);
            curDiv.addClass('big',1000);
            },function(){});
       });
    });
    </script>
    </head>
<body>
<div id="container">
<div class="preview big" style="background-color:red;width:50px;">&nbsp;</div><br>
<div class="detail" style="background-color:blue;width:50px;">&nbsp;</div>
</div>
</body>
</html>

文档:
JQuery hover , nextAll , prevAll
jQuery UI addClass , removeClass

说明:
在文档加载之后,脚本将查找具有这些类的div并附加onhover处理程序。在enter部分,我们将添加和删除类——在本例中,我们有一个更大的类。然后,我们使用jquery用detail类将dom遍历到下一个div,并向其中添加大类。同时,我们从当前分区中删除了大类。

在“添加/删除类”中,是一个以毫秒为单位的持续时间选项,可自动显示漂亮的外观。

在细节部分,我们做了完全相同的工作,但我们向后遍历以找到第一个预览分区。

这在Chrome上很顺利,但在IE7上很慢——主要是因为IES的javascript引擎。

Dakota dmg 15 年前

好吧,多亏了wskid,我有一个解决方案。只做了小改动。最终的javascript:

<script type="text/javascript">
    $(document).ready(function(){
        $('div.preview').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){
                curDiv.nextAll($('div.detail:first')).addClass('short');
                curDiv.addClass('expand');
            },function(){
                curDiv.nextAll($('div.detail:first')).removeClass('short');
                curDiv.removeClass('expand');
            });
       });
        $('div.detail').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){
                curDiv.prevAll($('div.preview:first')).addClass('short');
                curDiv.addClass('expand');
            },function(){
                curDiv.prevAll($('div.preview:first')).removeClass('short');
                curDiv.removeClass('expand');
            });
       });
    });
</script>

最终CSS:

div.preview, div.detail {
    height: 205px;
}

div.expand {
    height: 248px;
}

div.short {
    height: 8px;
}