Question

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

目标是当你将鼠标悬停在一个方框上时，内部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解决方案

JSfiddle link here

Answer 1

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

您需要移除.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" );
    }
);

这应该是它的样子

使用此查找以前的DOM元素jquery

1 个答案: