JavaScript - onmouseover 修改前一个元素 css 高度答案

【问题标题】：JavaScript - onmouseover modify previous element css heightJavaScript - onmouseover 修改前一个元素 css 高度
【发布时间】：2011-04-26 04:54:04
【问题描述】：

我有两个 div，我想控制它们的相对高度。这些 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 中的每一个上为 onmouseover 和 previousSibling 使用 JavaScript 来修改 CSS 高度。问题是，事情只是不想为我工作。谁有解决办法？

【问题讨论】：

标签： javascript css image html height

【解决方案1】：

好的，感谢 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;
}

【讨论】：

【解决方案2】：

有几个 javascript 库可以让这个过程变得简单。其中一个选项是 jQuery 和 jQuery-UI（两个独立的部分）。

类似这样的东西（重读问题后更新）：

<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 遍历 DOM 到具有 detail 类的下一个 div，并将大类添加到它。同时，我们从当前的 div 中删除大类。

在添加/删除类中是一个持续时间（以毫秒为单位）选项，它会自动提供漂亮的外观。

在细节部分我们做的完全相同，但是我们向后遍历找到第一个预览 div。

这在 Chrome 上运行顺利，但在 IE7 上运行缓慢 - 主要是因为 IE 的 javascript 引擎。

【讨论】：

我知道那里发生了什么，但在 Safari5 中它的方式很粗略。如果您导航到memeshirtz.com/shop，我可以使用纯 CSS，但仅用于将鼠标悬停在顶部 div 上。 CSS 缺少 + 运算符的逆操作让我很生气。顺便说一句，我不太担心 IE7 支持。如果它有效，那就太好了；如果没有，那就太糟糕了。

【解决方案3】：

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

我不知道您使用的是什么 JS，但我会推荐您使用 JQuery。 focus 的文档在这里。

【讨论】：

听起来是个好计划……但这是一个视觉技巧，所以我不太担心。