2

我所拥有的是一个搜索栏和一个图像作为submit按钮。submit我希望按钮的不透明度0.5处于正常状态，并且1.0当搜索栏处于打开状态时:focus。

这是我的 HTML：

<form id='searchThis' action='/search' method='get' style='display: inline;'>
<input id='searchBox' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='display:inline;font-family:Segoe UI, Microsoft Tai Le, trebuchet MS,&apos;lucida grande&apos;;width: 155px;color:#636363;' type='text' value='Search' vinput=''/>
<input id='submitsearch' alt='Search' height='20px' src='http://1.bp.blogspot.com/-Ab4nALwSEdw/T4LI1pym1LI/AAAAAAAABBA/_oQltx3svas/s320/search.png' style='display:inline; padding-left: 10px; margin-top:1px; position: absolute; opacity:0.5;' title='Search' type='image' width='20px'/>
</form>

但我不知道我应该使用 CSS 还是 Javascript，而且我也不擅长。

谁能帮我吗？

4

4 回答 4

5

CSS：

#submitsearch {
  opacity: 0.5;

     -moz-transition: opacity 0.5s;
      -ms-transition: opacity 0.5s;
       -o-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
          transition: opacity 0.5s;
}

#searchBox:focus + #submitsearch {
  opacity: 1.0
}
于 2012-10-07T14:21:04.907 回答
1

你可以使用 css

#submitsearch:hover {opacity:0.5}
于 2012-10-07T14:23:29.033 回答
0

您可以使用 CSS：

#submitsearch { opacity: 0.75; }
#submitsearch:hover, #submitsearch:active { opacity: 1; }
于 2012-10-07T14:25:39.327 回答
0

当我向 Newtron 的 CSS3 解决方案致敬时——我通常鼓励使用 jQuery 以获得更大的跨浏览器兼容性；以下是我通常会如何处理这种情况：http: //jsfiddle.net/earthdesigner/qc6Qf/1/

于 2012-10-07T14:35:09.953 回答