懸停在一個按鈕上，它的包含div的盒子陰影變暗

我似乎無法找到這樣的例子，即使我知道我以前見過它。基本上，當你將鼠標懸停在按鈕上時，居中在一個div（已經有一個盒子陰影）上，div的盒子陰影的不透明度變暗。懸停在一個按鈕上，它的包含div的盒子陰影變暗

所以，如果你看看這個JSFiddle，當你將鼠標懸停在「看到我的工作」，這個盒子陰影.business-presentation應該從改變

box-shadow: inset 0 0 0 4000px rgba(27,61,88,.5);

到

box-shadow: inset 0 0 0 4000px rgba(27,61,88,.8);

以下是相關的HTML和CSS：

HTML：

<div class="col-md-6 col-sm-12 business-presentation"> 
    <div class="see-my-work"> 
     <button class="view-websites hover-darker">See My Work</button> 
    </div> 
</div>

CSS：

.business-presentation { 
    background: url("http://i.imgur.com/YzpXEYy.jpg"); 
    box-shadow: inset 0 0 0 4000px rgba(27,61,88,.8); 
    height: 400px; 
    background-size: cover; 
    background-repeat: no-repeat; 
    align-items: center; 
    justify-content: center; 
    display: flex; 
} 

.see-my-work { 
    text-align: center; 
    vertical-align: middle; 
    padding: 10px 30px 10px 30px; 
    font-family: 'proxima_novalight'; 
    color: #ffffff; 
} 

.view-websites { 
    text-align: center; 
    text-transform: uppercase; 
    color: #ffffff; 
    margin: auto; 
    font-size: 30px; 
    border: 2px solid #ffffff; 
    padding: 10px 30px 10px 30px; 
    background-color: transparent; 
} 

.hover-darker:hover { 

}

我見過this example但它不與懸停在另一個時改變一個元素的盒子陰影處理。這將需要JavaScript嗎？感謝您的建議。

來源

2017-06-23 HappyHands31

您可以使用jQuery的mouseenter() & mouseout()。

請看這裏https://jsfiddle.net/vk3qw09f/151/

來源

2017-06-23 01:21:15

這是一個工程 - 謝謝你！有沒有辦法改變轉換速度，以便它變成黑暗的不透明度？ – HappyHands31

您可以更改轉換速度的方式實際上是使用CSS。只需在CSS中調整類的樣式，那些具有'box-shadow：inset 0 0 0 4000px rgba（27,61,88，.8）;'並添加'transition：box-shadow 0.4s ease-in退房手續;'。 – HappyHands31

您不能使用孩子的選擇器更改父母屬性。你可以在這種情況下做什麼是box-shadow從.business-presentation, to a combination of背景顏色and框陰影on the。查看網站按鈕。見https://jsfiddle.net/james_wesc/y82kvbtc/

或者變化是：

.business-presentation { 
    /* box-shadow: .. */ /* remove box-shadow 
    overflow: hidden; 
} 

.visit-websites { 
    background-colour: rgba(27,61,88,.5); 
    box-shadow: 0 0 0 400px rgba(27,61,88,.5); 
} 

.visit-websites:hover { 
    background-colour: rgba(27,61,88,.8); 
    box-shadow: 0 0 0 400px rgba(27,61,88,.8); 
}

來源

2017-06-23 01:12:36

懸停在一個按鈕上，它的包含div的盒子陰影變暗

回答

相關問題