JQuery盒阴影插入问题
我对JQuery和插入框阴影有问题 首先,我有一个输入字段JQuery盒阴影插入问题,jquery,css,Jquery,Css,我对JQuery和插入框阴影有问题 首先,我有一个输入字段 <input id="name" name="name" type="text" /> 好的。现在,JQuery部分: 我想做什么!如果我将鼠标悬停在输入字段上,我需要一个“外部”框阴影。比如:boxShadow:“0px 0px 15px#750082”。但是插入框阴影应该是相同的 $(document).ready(function(){ $("#message").hover( functio
<input id="name" name="name" type="text" />
好的。现在,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"});
});
});
问题是“外部”框阴影将显示为插入框阴影。
但我想要一个“外”框阴影和一个嵌入框阴影
那么,我的解决方案有什么问题?有更好的吗
致意
编辑
我正在使用jQuery1.6.2,对于boxshadow,我正在使用插件 这里有两个选项可以获得相同的期望结果
1:为
<span id="nameWrapper">
<input id="name" name="name" type="text" value="" />
</span>
2:改用CSS3转换
CSS:
您可以考虑编写影子插件的作者来通知他/她这个问题。
YEP,问题是关于代码>框阴影< /代码><span id="nameWrapper">
<input id="name" name="name" type="text" value="" />
</span>
$("#name").hover(function() {
$(this).parent().stop().animate({
boxShadow: "0px 0px 15px #750082"
}, 800);
}, function() {
$(this).parent().stop().animate({
boxShadow: ""
}, 800);
});
#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;
}