Question

您好我正在研究svg基本地图，其中我突出显示了一些特定位置，当用户鼠标悬停在它上面时，它会弹出位置名称和颜色变化，现在我的客户端需要在用户鼠标悬停时对其产生阴影效果它的颜色变化和阴影效果也适用。这是我的代码。

svg代码

<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>

这是css

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

Answer 1

您可以创建基于svg的splashhadow。

.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 */
}

您可以阅读有关此HERE

的信息

当鼠标悬停在css

1 个答案: