css2有獲得焦點(diǎn)的選擇器:
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的海拉爾網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
input:focus {...} //當(dāng)input元素獲得焦點(diǎn)時(shí)就會(huì)套用這個(gè)樣式
也就是說(shuō)當(dāng)input元素失去焦點(diǎn)就會(huì)恢復(fù)為原來(lái)的樣式。因此只需給同一類元素設(shè)置默認(rèn)樣式和獲得焦點(diǎn)時(shí)的樣式即可實(shí)現(xiàn)你的目的。
CSS :focus
:focus 選擇器用于選取獲得焦點(diǎn)的元素。
提示:接收鍵盤(pán)事件或其他用戶輸入的元素都允許 :focus 選擇器。
所有主流瀏覽器都支持 :focus 選擇器。
注釋:如果 :focus 用于 IE8 ,則必須聲明 !DOCTYPE。
html
head
style
input:focus
{
background-color:yellow;
}
/style
/head
body
p在文本框中點(diǎn)擊,您會(huì)看到黃色的背景:/p
form
First?name:?input?type="text"?name="firstname"?/br
Last?name:?input?type="text"?name="lastname"?/
/form
/body
/html
focus,alink,hover,active都是偽類
:active
向被激活的元素添加樣式。
:focus
向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式。
:hover
當(dāng)鼠標(biāo)懸浮在元素上方時(shí),向元素添加樣式。
:link
向未被訪問(wèn)的鏈接添加樣式。
css的focus偽類是選擇擁有焦點(diǎn)的元素并匹配樣式,也就是說(shuō)它不是一種動(dòng)作(讓元素獲得焦點(diǎn)),而是根據(jù)元素的狀態(tài)(是否有焦點(diǎn))來(lái)選擇樣式。
它們是可以一塊用的,但并不是你想象的那樣:
xxx:hover:focus {color:red}
這個(gè)的意思就是如果xxx擁有焦點(diǎn)則鼠標(biāo)經(jīng)過(guò)時(shí)使其文字顏色變?yōu)榧t色。
要想實(shí)現(xiàn)你要的功能,必須用js才能實(shí)現(xiàn):
xxx.onmouseover=function(){
this.focus();
}
網(wǎng)站焦點(diǎn)圖是一種網(wǎng)站內(nèi)容的展現(xiàn)形式,可簡(jiǎn)單理解為一張圖片或多張圖片展現(xiàn)在網(wǎng)頁(yè)上就是網(wǎng)站焦點(diǎn)圖。在網(wǎng)站很明顯的位置,用圖片組合播放的形式,類似焦點(diǎn)新聞的意思只不過(guò)加上了圖片。
css焦點(diǎn)圖,不難理解網(wǎng)頁(yè)設(shè)計(jì)現(xiàn)在流程html+css設(shè)計(jì),css焦點(diǎn)圖就是這樣而來(lái)的,很多情況下需要結(jié)合js代碼實(shí)現(xiàn)。
分類:
焦點(diǎn)圖必須有圖片,無(wú)圖不成焦,不然純文字的形式就是焦點(diǎn)文字或焦點(diǎn)新聞啦。
js焦點(diǎn)圖,使用原生態(tài)的js代碼實(shí)現(xiàn)的焦點(diǎn)圖。樣式相對(duì)單一,如借助css可實(shí)現(xiàn)多樣的風(fēng)格。
flash焦點(diǎn)圖,看名字就可以理解,使用flash設(shè)計(jì)或用flash as編程設(shè)計(jì)的焦點(diǎn)圖。該焦點(diǎn)圖優(yōu)點(diǎn)是字體展現(xiàn)效果佳,比純網(wǎng)頁(yè)形式更具有美感。不利于SEO與引擎的抓取。
以上內(nèi)容參考:百度百科-網(wǎng)站焦點(diǎn)圖