jquery - 使用此查找上一个 DOM 元素 jQuery

Question

我有一些用 html 设置的盒子，每个盒子里面都有一个内容 div，带有 border right 属性。

目标是当您将鼠标悬停在一个框上时，内部 div 的右边框消失，并且前一个框的边框也消失。

这是 HTML:

<div class="box">
    <div class="box-content">
        <p>text text text</p>
    </div>
</div>

<div class="box">
    <div class="box-content">
        <p>text text text</p>
    </div>
</div>

<div class="box">
    <div class="box-content">
        <p>text text text</p>
    </div>
</div>

CSS

.box {
  float: left;
  width: 200px;
  height: 400px;
  padding 100px;
}

.box-content {
  height: 200px;
  border-right: 1px solid black;
}

jQuery

jQuery(".box").hover(
        function() {
            jQuery(this).find(".box-content").css( "border-right", "none" );
            jQuery(this).find(".box .box-content").prev().css( "border-right", "none" );
        },
        function() {
            jQuery(this).find( ".box-content" ).css( "border-right", "1px solid black" );
            jQuery(this).find(".box .box-content").prev().css( "border-right", "black" );
        }
    );

我快要让它工作了，我已经成功地让边框在悬停时消失了，但我无法让前一个框移除它的右边框。

我该如何解决这个问题？我能够使用 jQuery 解决方案或纯 CSS 解决方案。

JS Fiddle link

Answer 1

当您使用 jQuery(this) 时，您已经在悬停的当前 .box 中。

您需要删除 .box 并在 jQuery(this) 之后使用 prev

jQuery(".box").hover(
    function() {
        jQuery(this).find(".box-content").css( "border-right", "none" );
        jQuery(this).prev().find(".box-content").css( "border-right", "none" );
    },
    function() {
        jQuery(this).find( ".box-content" ).css( "border-right", "1px solid black" );
        jQuery(this).prev().find(".box-content").css( "border-right", "1px solid black" );
    }
);

它应该是这样的