Was ich habe, ist eine Suchleiste und ein Bild als submit Schaltfläche. Ich möchte, dass die Deckkraft der Schaltfläche submit im Normalzustand 0.5 und 1.0 ist, wenn die Suchleiste auf :focus steht.
Hier ist mein HTML:
<form id='searchThis' action='/search' method='get' style='display: inline;'>
<input id='searchBox' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='display:inline;font-family:Segoe UI, Microsoft Tai Le, trebuchet MS,'lucida grande';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>
Aber ich weiß nicht, ob ich CSS oder Javascript verwenden soll, und ich bin auch nicht sehr gut darin.
Kann mir jemand weiterhelfen?
2
FreedomRequiresWings
7 Okt. 2012 im 18:15
4 Antworten
Beste Antwort
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
}
5
newtron
7 Okt. 2012 im 14:28
Sie können ein CSS verwenden:
#submitsearch { opacity: 0.75; }
#submitsearch:hover, #submitsearch:active { opacity: 1; }
0
Nikola K.
13 Nov. 2012 im 12:50
Während ich die CSS3-Lösung von Newtron begrüße, empfehle ich normalerweise die Verwendung von jQuery für eine größere browserübergreifende Kompatibilität. So würde ich normalerweise mit dieser Situation umgehen: http://jsfiddle.net/earthdesigner/qc6Qf/1/
0
earthdesigner
7 Okt. 2012 im 14:35
Sie können CSS verwenden
#submitsearch:hover {opacity:0.5}
1
j0k
7 Okt. 2012 im 14:33