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

Question

我有两个 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 高度。问题是，事情就是不想为我工作。谁有解决办法？

Answer 1

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

我不知道您使用的是什么 JS，但我会建议您使用 JQuery。关于 focus 的文档在这里。