懸停按鈕更改其他類的css

在下面的html .pricing-item有一個邊框，當它被徘徊時出現（.pricing-item:hover::after）。我試圖設置它，以便當按鈕（pricing-button btn-primary）懸停時，.pricing-item邊框的CSS設置爲'0px;'。懸停按鈕更改其他類的css

<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文件中嘗試使用~或+，使一類影響其他的，但只是沒有得到它的權利。任何幫助，將不勝感激。謝謝。

來源

2016-01-27 nrider

你的意思是懸停{邊界：無}; ？ – AceLearn

純粹的CSS沒有明確的做法。你可能想看看[JavaScript的]（https://developer.mozilla.org/en-US/docs/Web/JavaScript），[SASS（http://sass-lang.com/）或[指南針] （http://compass-style.org/）。 – choz

這裏有一個竅門，你可以做，以達到你想要什麼。

.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>

來源

2016-01-27 10:06:41 LGSon

感謝LGSon和所有其他發佈他們建議的人。我將其標記爲答案，因爲創建新包裝比較容易，將

不幸的是沒有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'); 

    } 
);

來源

2016-01-27 09:56:35

以您目前的HTML代碼，簡單的答案是：你不能。

原因是：您嘗試訪問CSS的父元素，這是不可能的。

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

你必須要改變的東西在你的HTML，如：

所以它會使事情更容易：

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

來源

2016-01-27 10:00:20 enguerranws

CSS

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

個

$(".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"); 
    } 
});

來源

2016-01-27 10:03:24 anurag

懸停按鈕更改其他類的css

回答

相關問題