3

我在一个 html 页面中有很多 div。我需要使用 jQuery/Javascript 在鼠标悬停时为这些 div 提供阴影效果。如果最初要应用投影，我可以让它工作，但我无法在运行时让它工作。

需要应用阴影的 div 有一个公共类。在小提琴中是测试。

我创造了一个小提琴

http://jsfiddle.net/bobbyfrancisjoseph/ZEuVE/2/

它应该可以在 IE8 及更高版本上运行，所以我猜 CSS3 可以使用。

4

5 回答 5

7

使用这个 css 的阴影效果（覆盖大多数浏览器）：

.classWithShadow{
   -moz-box-shadow: 3px 3px 4px #000; 
   -webkit-box-shadow: 3px 3px 4px #000; 
   box-shadow: 3px 3px 4px #000; 
}

使用以下jQuery：

$(".yourDiv").hover(function()
{ 
   $(this).toggleClass('classWithShadow');
});

完整代码在这里：http: //jsfiddle.net/ZEuVE/3/

编辑：对不起，我编辑了你最初的小提琴而不是制作一个新的。但它有效^^ :)

于 2012-07-10T09:54:34.030 回答
5

IE8 不支持 CSS3 阴影

适用于您的 IE8 及其他浏览器

$("div").hover(function() {
        $(this).css(
            "box-shadow", "10px 10px 5px #888"
        );
    }, function() {
        $(this).css(
            "box-shadow", "0px 0px 0px #888"
        );
    });
于 2012-07-10T09:57:19.973 回答
2 
$("div").mouseover(function() {
     $(this).css("box-shadow", "5px 5px 5px #555");
  }).mouseleave(function(){
    $(this).css("box-shadow", "0px 0px 0px #555");
 });

或使用 mouseenter 事件

$("div").mouseenter(function() {
   $(this).css("box-shadow", "5px 5px 5px #555");
  }).mouseleave(function(){
    $(this).css("box-shadow", "0px 0px 0px #555");
});
于 2012-07-10T10:03:46.727 回答
1

:hover当 CSS伪类自身完美运行时，使用 jQuery 添加简单的悬停效果几乎没有意义。

您遇到的唯一问题是 IE8 不支持原生 CSS drop-shdows (box-shadow)。

要克服这个问题，您有两种选择；

1) 试图诱使微软的专有DropShadow和Blur过滤器产生类似于投影的东西。正如本指南所示，这是可能的，但根据我使用 MS 过滤器的经验，这是您通往充满痛苦和痛苦的人生道路的第一步。过滤器会以无法预测的方式影响同一页面上其他看似无关的样式和元素。你真正能做的就是试试看。

2）使用图像。这很糟糕，如果 div 的大小都不同，则很难获得正确的图像。但是，如果您在仅 IE8 的样式表中执行此操作并事先知道尺寸，则它可以很好地工作。

于 2012-07-10T10:08:00.083 回答
0

无论源 aspx 中的代码隐藏语言如何，这是通用答案。使用 & CSS

 <style>
    .img {
      
     
      border:2px solid #fff;
       box-shadow: 1px 1px .5px #ccc;
      -moz-box-shadow: 1px 1px .5px #ccc;
      -webkit-box-shadow: 1px 1px .5px #ccc;
      float:left;
      width:auto;
      border:solid;
      border-width:.25px;
      padding:15px;
      margin-right:20px;
      margin-bottom:20px;
      margin-top:20px;
      border-radius:5px;
     text-align:center;
    
    
  
    }
    .img:hover {
  box-shadow: 10px 10px 5px #ccc;
      -moz-box-shadow: 10px 10px 5px #ccc;
      -webkit-box-shadow: 10px 10px 5px #ccc;
       -webkit-transform: scale(1.25, 1.25);
    transform: scale(1.25, 1.25);
    background: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
}
    
  </style>
         <MyShadowdivOnMousOver class="img">
        <MyShadowdivOnMousOver >
于 2021-09-09T22:59:15.433 回答