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

私は Newtron の CSS3 ソリューションに敬意を表しますが、ブラウザー間の互換性を高めるために jQuery の使用を推奨しています。この状況を通常どのように処理するかは次のとおりです。 http://jsfiddle.net/earthdesigner/qc6Qf/1/

于 2012-10-07T14:35:09.953 に答える
0

CSS を使用できます。

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