悬停在一个按钮上，它的包含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的盒子阴影变暗

回答

相关问题