我在使用 JQuery 和插入 Box-Shadow 时遇到问题。
首先我有一个输入字段。
<input id="name" name="name" type="text" />
该字段具有以下 css 样式:
#contact input[type="text"] {
background: rgba(55,55,55, 0.6);
height:2em;
border: 1px dashed #666;
width:200px;
box-shadow:inset 0px 0px 10px #222;
border-radius: 2px;
}
好的。现在是 JQuery 部分:
我想做的事!如果我将鼠标悬停在输入字段上,我想要一个“外部”框阴影。例如:boxShadow:“0px 0px 15px #750082”。但内嵌框阴影应该是相同的!!
$(document).ready(function(){
$("#message").hover(
function()
{$(this).stop().animate({boxShadow: "0px 0px 15px #750082"},800);
},
function()
{$(this).stop().animate({boxShadow: "inset 0px 0px 10px #222222"});
});
});
问题是“外部”框阴影将显示为内嵌框阴影。 但我想要一个“外部”盒阴影和一个内嵌盒阴影!
那么我的解决方案有什么问题吗?有人有更好的吗?
致以诚挚的问候
编辑 我正在使用 JQuery 1.6.2,对于我正在使用的 boxshadow http://www.bitstorm.org/jquery/shadow-animation/test.html插件!
最佳答案
这里有两个选项来获得相同的期望结果
1:使用 <input>
的包装器
<span id="nameWrapper">
<input id="name" name="name" type="text" value="" />
</span>
jQuery:
$("#name").hover(function() {
$(this).parent().stop().animate({
boxShadow: "0px 0px 15px #750082"
}, 800);
}, function() {
$(this).parent().stop().animate({
boxShadow: ""
}, 800);
});
2:使用 CSS3 过渡
CSS:
#contact input[type="text"] {
background: rgba(55,55,55, 0.6);
height:2em;
border: 1px dashed #666;
width:200px;
box-shadow:inset 0px 0px 10px #222;
border-radius: 2px;
outline:0;/* prevent webkit highlight on focus */
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#contact input[type="text"]:hover {
/* set both shadows */
box-shadow:inset 0px 0px 10px #222,0px 0px 15px #750082;
}
您可以考虑写信给shadow插件的作者,通知他/她这个问题。
关于jQuery Box-阴影插入问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7142408/