如何使用图像创建阴影

我试图在悬停上创建阴影。这是我写的代码。问题是当我将鼠标移到div上时，它发光，但当我将鼠标移动到图像上时，发光消失。如何使用图像创建阴影

<style> 

#engines { 
    margin: 0; 
    padding: 0; 
} 

#engines div { 
    float: left; 
    width: 110px; 
    height: 130px; 
    border: 1px solid #eeeeee; 
} 

#engines div img { 
    margin: 5px 0 0 15px; 
} 


</style> 

<script> 
    $('document').ready(function() { 
     $("#engines").children().hover(function() { 
      $(this).css("box-shadow", "3px 3px 4px #000"); 
     }); 

     $("#engines").children().mouseout(function() { 
      $(this).css("box-shadow", "0px 0px 0px #000"); 
     }); 

    }); 
</script> 


</head> 

<div id="engines"> 
    <div id="engine1"> 
     <img 
      src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Mercedes_V6_DTM_Rennmotor_1996.jpg" 
      width="80px" height="100px" />Dibya 
    </div> 

</div>

这是demo

来源

2013-08-28 NewUser

的阴影创建CSS类，并使用[jQuery的addClass（HTTP：/ /api.jquery.com/addClass/），然后它将持久化，并使用mouseleave删除类（removeClass）以移除阴影 –

这是您想单独应用于更多类似引擎项目的效果，例如作为'＃engine2'，'＃engine3'等等......就像在画廊里一样？我想你应该澄清这@BenM – cjross

添加float: left定义#engines，使含<div>元素会占据一定的高度，然后用第二功能在hover()功能。你更新的代码应该是这样的：

CSS：

#engines { 
    margin: 0; 
    padding: 0; 
    float: left; 
} 

#engines div { 
    float: left; 
    width: 110px; 
    height: 130px; 
    border: 1px solid #eeeeee; 
} 

#engines div img { 
    margin: 5px 0 0 15px; 
}

的jQuery：

$("#engines").hover(function() { 
    $(this).css("box-shadow", "3px 3px 4px #000"); 
}, function() { 
    $(this).css("box-shadow", "0px 0px 0px #000"); 
});

这里有一个更新的jsFiddle

你应该阅读过hover() documentation。请注意，它可以接受参数列表中的两个处理函数，一个在悬停开始时调用，另一个在结束时调用。

当然，你总是可以单独添加以下CSS使用:hover伪类为#engines：

#engines:hover { 
    box-shadow: 3px 3px 4px #000; 
}

这里是展示在行动CSS方法jsFiddle。

来源

2013-08-28 07:46:09 BenM

可以使用:hover伪类：

#engines img:hover{ 
box-shadow: 3px 3px 4px black; 
}

来源

2013-08-28 07:44:50

不需要使用'mouseenter'和'mouseleave'，这就是'hover'创建的。它可以接受两个处理函数...... – BenM

非常真实，删除对mouseenter和mouseleave的引用 –

试试这个更新的小提琴。您可以使用find（）方法来获取所有的孩子：http://jsfiddle.net/sLytQ/2/

$('document').ready(function() { 
    $("#engines").find('*').hover(function() { 
      $('#engine1').css("box-shadow", "3px 3px 4px #000"); 
    }); 

    $("#engines").find('*').mouseout(function() { 
      $('#engine1').css("box-shadow", "0px 0px 0px #000"); 
    }); 
});

来源

2013-08-28 07:48:13 Yeronimo

如果您不停止对事件的传播，则不应要求将它绑定到'＃engines'的所有子节点。无论如何，他们都会传播给父母...... – BenM

$('document').ready(function() { 
    $("#engine1").children().hover(function() { 
     $(this).css("box-shadow", "3px 3px 4px #000"); 
    }); 

    $("#engine1").children().mouseout(function() { 
     $(this).css("box-shadow", "0px 0px 0px #000"); 
    }); 

});

来源

2013-08-28 07:55:47 Feng77

试试这个，

<script> 
$('document').ready(function() { 
    $("#engines").hover(function() { 
     $(this).css("box-shadow", "3px 3px 4px #000"); 
    }, 
    function() { 
     $(this).css("box-shadow", "0px 0px 0px #000"); 
    } 
    ); 


}); 
</script>

来源

2013-08-28 07:58:58

如何使用图像创建阴影

回答

相关问题