javascript - 如何将鼠标悬停在按钮上，使用 jQuery 使包含 Div 的框阴影变暗

Question

我似乎找不到这方面的例子，尽管我知道我以前见过它。基本上，当您将鼠标悬停在按钮上时，以 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 吗？感谢您的建议。

Answer 1

您可以使用 jQuery mouseenter() 和 mouseout()。

请参阅此处 https://jsfiddle.net/vk3qw09f/151/