How to Include The Box-Shadow in The Div Area That Responds to a Click Event

Is it possible to include the box-shadow in the div area that responds to a click event?

Yes, changing the box-shadow to an inset shadow will make the area occupied by the shadow also clickable. An inset box-shadow is actually added within the element and hence even a click on the shadow is treated as a click on the div.

window.onload = function() {  var btn = document.querySelector("#button");  var btnOriginal = document.querySelector("#button-original");
  btn.addEventListener("click", function() {    alert("I have been clicked");  });  btnOriginal.addEventListener("click", function() {    alert("I have been clicked");  });}

#button {  width: 64px;  height: 64px;  border: none;  border-radius: 50px;  box-shadow: inset 0 0 2px 2px #fff, inset 0 0 0 7px #c03;}#button-original {  width: 50px;  height: 50px;  border: none;  border-radius: 50px;  box-shadow: 0 0 0 5px #c03, 0 0 2px 7px #fff;}
/* Just for demo */
#button {  margin: 10px;}#button-original {  margin: 17px;}div:hover {  cursor: pointer;}body{  background: black;

<div id="button"></div><!-- modified version -->
<div id="button-original"></div><!-- original version -->

Set a box-shadow on div when click on it

Any event occurred in divs, first clear all borders and then add to specific on. Your JQuery selector also is wrong boxshodow or boxShodow.

$(document).ready(function() {  $(".boxShadow").on('click', function() {    $(".boxShadow").each(function() {      $(this).css({        "box-shadow": "none"      });    })    $(this).css({      "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707"    });  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-4 col-md-6 boxShadow">    <div class="card card-pricing card-plain">      <h6 class="card-category"> Bravo Pack</h6>      <div class="card-body">        <div class="card-icon icon-warning ">          <i class="now-ui-icons media-1_button-power"></i>        </div>        <h3 class="card-title" style="color: #333;">10$</h3>        <ul>          <li style="color: #888;">Complete documentation</li>          <li style="color: #888;">Working materials in Sketch</li>        </ul>
      </div>    </div>  </div>
  <div class="col-lg-4 col-md-6 boxShadow">    <div class="card card-pricing">      <h6 class="card-category"> Alpha Pack</h6>      <div class="card-body">        <div class="card-icon icon-primary ">          <i class="now-ui-icons objects_diamond"></i>        </div>        <h3 class="card-title">69$</h3>        <ul>          <li>Working materials in EPS</li>          <li>6 months access to the library</li>        </ul>      </div>    </div>  </div>
  <div class="col-lg-4 col-md-6 boxShadow">    <div class="card card-pricing card-plain">      <h6 class="card-category"> Charlie Pack</h6>      <div class="card-body">        <div class="card-icon icon-success ">          <i class="now-ui-icons media-2_sound-wave"></i>        </div>        <h3 class="card-title" style="color: #333;">69$</h3>        <ul>          <li style="color: #888;">Working materials in PSD</li>          <li style="color: #888;">1 year access to the library</li>        </ul>      </div>    </div>  </div></div>

How to add inset box-shadow to mapbox-div?

Add the shadow to a :before pseudo element or an empty div. For foolproof z-index you can also wrap the map in an additional div.

#map {
   position: relative;
   z-index: 0;
}

#map > .map-wrapper {
    position: relative;
    z-index: 5;
}

#map:before {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 10;
    pointer-events: none;

    -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
}

This uses pointer-events: none; which means that it won't work below IE11. But there's really no way to add an element above another in a way that wont block click events. You could split the shadow in four different containers and place them top, left, right and bottom. But the area under the shadow will still be un-clickable without pointer-events none.

You could use a libary like Modernizr to check for the functionality and only add the shadow then. But it's a bit exessive to add another library just for that.

CSS div overlaps, mouse event not recognized below it

I have updated this for you. Please see this fiddle I have set position: relative on the ul because the z-index property only works when the position is set. I have then set the z-index of the ul to 2 and of the div to 1 so it is rendered behind the ul.

EDIT: I have made a couple more changes to the css. As it stands there are 4 extra lines added. position & z-index on the ul, box-shadow on the li and z-index on the div. It now looks like the box shadow from the div blends into the links. Slightly messier than the first solution, but it works.

Box-Shadow over child elements?

It is because your box shadow is inset. Meaning it will appear inside the box.

Whilst your nested div will cover it. Using a border applies to the outside of the "box".

Removing the inset from your CSS will cause the effect you are after.

See updated fiddle with inset remove. fiddle

box-shadow: 0px 0px 0px 2px black;
-webkit-box-shadow: 0px 0px 0px 2px black;
-moz-box-shadow: 0px 0px 0px 2px black;

UPDATE
To have just the inset box shadow visible, you could make the child div 4px pixels smaller in width than the parent. Then use margins to correctly position the div. However I'm not sure this completely achieves what you are after? See this fiddle.

.a{
    width: 200px;
    float: left;
    height: 200px;
    margin-right: 100px;
    background-color: red;
    box-shadow: inset 0px 0px 0px 2px black;
    -webkit-box-shadow: inset 0px 0px 0px 2px black;
    -moz-box-shadow: inset 0px 0px 0px 2px black;
}

.b {
    width: 196px;
    height: 100px;
    background-color: yellow;
    margin:2px auto 0 auto;
}

UPDATE 2
This "Hack" applies an overlay to the two elements with the box shadow. See fiddle.

HTML

<div class="a">
    <div class="b">How it is (Yellow div covers the box shadow)</div>
    <div class="shadow"> </div>
</div>

CSS

.a{
    width: 200px;
    float: left;
    height: 200px;
    margin-right: 100px;
    background-color: red;
    position:relative;
}

.b {
    width: 200px;
    height: 100px;
    background-color: yellow;
}

.shadow {
    box-shadow: inset 0px 0px 0px 2px black;
    -webkit-box-shadow: inset 0px 0px 0px 2px black;
    -moz-box-shadow: inset 0px 0px 0px 2px black;
    position:absolute;
    top:0;
    width:200px;
    height:200px;
}

CSS Box Shadow Bottom Only

Do this:

box-shadow: 0 4px 2px -2px gray;

It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.

Change div shadow on click and back on next

Since you are using jQuery, try using toggleClass.

Addl. css:

.sboxOpen {
     box-shadow: 0 0 30px blue;
}

Your script becomes:

<script>
$(function () {
    $(".sbox").click(function () {
        $(this).toggleClass('sboxOpen');
    });
});
</script>

JS Fiddle: https://jsfiddle.net/nmhrfa8y/4/

---

Related Topics