How to Hover Over a Button, Cause the Box-Shadow of It's Containing Div To Get Darker With jQuery

Question

I can't seem to find an example of this even though I know I've seen it before. Basically, when you hover over the button, centered within a div (that already has a box shadow over it), the opacity of the div's box shadow gets darker.

So if you take a look at this JSFiddle , when you hover over "See My Work", the box shadow over .business-presentation should change from

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

to

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

Here is the HTML and CSS in question:

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 {

 }

I've seen this example but it doesn't deal with changing the box shadow of one element when hovering over another. Will this require JavaScript? Thanks for your suggestions.

Answer 1

You can use the jQuery mouseenter() & mouseout() .

See here https://jsfiddle.net/vk3qw09f/151/

Answer 2

You can't change a parents property with a child's selector. What you can do in this case is change box-shadow from .business-presentation, to a combination of background-colour and box-shadow on the .view-websites` button. See https://jsfiddle.net/james_wesc/y82kvbtc/

Or the changes are:

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