我用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>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.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小提琴鏈接

你已經在水流里面了。使用jQuery時懸停的框(this)。

您需要移除。框，并在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" );
    }
);

這是它應該看起來的樣子