我似乎找不到这方面的例子,尽管我知道我以前见过它。基本上,当您将鼠标悬停在按钮上时,以 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 吗?感谢您的建议。
最佳答案
您可以使用 jQuery mouseenter()
和 mouseout()
。
关于javascript - 如何将鼠标悬停在按钮上,使用 jQuery 使包含 Div 的框阴影变暗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44711341/