Question

在以下html中，.pricing-item有一个边框，当它悬停时会显示（.pricing-item:hover::after）。我试图设置它，以便当按钮（pricing-button btn-primary）悬停时，.pricing-item边框的css设置为'0px;'。

<div class="pricing-item">
                <div class="pricing-icon"></div>
                <h3 class="pricing-title">Title</h3>
                <div class="pricing-price"><span class="pricing-currency">$</span>200<span class="pricing-period">/ year</span></div>
                <ul class="pricing-feature-list">
                    <li class="pricing-feature">Feature</li>
                    <li class="pricing-feature">Feature</li>
                    <li class="pricing-feature">Feature</li>
                    <li class="pricing-feature">Feature</li>
                </ul>
                <button class="pricing-button btn btn-primary">Choose plan</button>

在css文件中尝试使用~或+来使一个类影响另一个但只是没有正确。任何帮助，将不胜感激。感谢。

Answer 1

不幸的是，没有CSS选择器可以上升到dom ..为此你必须使用JS。

您可以在pricing-item上添加悬停效果，但不能仅悬停在该元素内的按钮上。

一个简单的JS版本是：

$('.pricing-button.btn-primary').hover(
  function() {
    $(this).parent().css('border', '2px solid black');
  },
  function() {
      $(this).parent().css('border', 'none');

  }
);

Answer 2

使用您当前的HTML代码，简短的回答是：您无法。

原因是：您尝试使用CSS访问父元素，这是不可能的。

<div class="pricing-item">
            ...
            <button class="pricing-button btn btn-primary">Choose plan</button>
</div>

您必须更改HTML 中的内容，例如：

<div class="pricing-item">
            ...
            <button class="pricing-button btn btn-primary">Choose plan</button>
            <div class="pricing-item-border"></div>
</div>

所以它会让事情变得更容易：

.pricing-item:hover .pricing-item-border { /* Display the border */}
.pricing-item:hover .pricing-button:hover + .pricing-item-border { /* Hide the border */}

Answer 3

<强> CSS

.pricing-item.no-border{
 border: 0px;
}

<强> JS

$(".pricing-button".on({
    mouseenter: function () {
        //stuff to do on mouse enter
        $(this).parents(".pricing-item").addClass("no-border");
    },
    mouseleave: function () {
        //stuff to do on mouse leave
        $(this).parents(".pricing-item").removeClass("no-border");
    }
});

Answer 4

这是你可以做的一个技巧，以实现你想要的。

.pricing-item-wrapper {
  position: relative;
}

.pricing-item {
  padding-bottom: 30px;
  border: 1px solid red;
  z-index: 1;
}

.pricing-button {
  position: absolute;
  bottom: 10px;
  left: 1px;
  z-index: 2;
}

.pricing-button:hover + .pricing-item {
  border: 1px solid transparent;
}

<div class="pricing-item-wrapper">
  <button class="pricing-button btn btn-primary">Choose plan</button>
  <div class="pricing-item">
    <div class="pricing-icon"></div>
    <h3 class="pricing-title">Title</h3>
    <div class="pricing-price">
      <span class="pricing-currency">$</span>
      200
      <span class="pricing-period">/ year</span>
    </div>
    <ul class="pricing-feature-list">
      <li class="pricing-feature">Feature</li>
      <li class="pricing-feature">Feature</li>
      <li class="pricing-feature">Feature</li>
      <li class="pricing-feature">Feature</li>
    </ul>
  </div>
</div>

悬停按钮改变其他类的css

4 个答案: