How to apply drop shadow on svg base map when mouse hover through css

Question

Hi I am working on svg base map in which I highlight some specific location and when user mouse hover on it it pop the name of location and also color change, now my client need drop shadow effect on that when user mouse hover on it its color change and also drop shadow effect apply. Here is my code.

The svg code

<path id="Middle East Region" class="enabled"  fill="#21669E" stroke="#FFFFFF" stroke-width="0.75" d=""</path>

<script>
  $description = $(".description");
    $('.enabled').hover(function() {
      $(this).attr("class", "enabled heyo");
      $description.addClass('active');
      $description.html($(this).attr('id'));
    }, function() {
      $description.removeClass('active');
    });
  $(document).on('mousemove', function(e){
    $description.css({
      left:  e.pageX,
      top:   e.pageY - 70
    }); 
  });
</script>

Here is the css

.heyo:hover {
   fill: #CC2929;
   -moz-transition: 0.3s;
   -o-transition: 0.3s;
   -webkit-transition: 0.3s;
   transition: 0.3s; 
}

Are you referring to something like this [**JSFiddle**](https://jsfiddle.net/vivekkupadhyay/qmrz3kjp) ? — vivekkupadhyay, Feb 20 '17 at 06:06

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

You can create svg based dropshadow.

.shadow {
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
            filter: drop-shadow( 3px 3px 2px rgba(0,0,0,.7) ); /* Same syntax as box-shadow */
}

You can read about this HERE

edited May 23 '17 at 12:00

Community

1
1

answered Feb 20 '17 at 06:35

Aslam

9,204
4
35
51

How to apply drop shadow on svg base map when mouse hover through css

1 Answers1