解決IE7以下版本不支持無(wú)A狀態(tài)偽類(lèi)的幾種方法！_Web標(biāo)準(zhǔn)教程
教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!
在IE7以下版本一直是不支持無(wú)A狀態(tài)偽類(lèi)的，通常都要靠Javascript來(lái)解決的，最近經(jīng)常有人問(wèn)起此類(lèi)問(wèn)題，故整理了幾種方法，腳本來(lái)自國(guó)外網(wǎng)站，供大家參考。
方法一
javascript文件，來(lái)自Htmldog .
腳本可改動(dòng)的部分
CSS
上面代碼中第一個(gè)類(lèi)是給支持CSS2的瀏覽器，第二個(gè)是給IE6及以下版本的。需注重的是，你給某標(biāo)簽設(shè)定了，那么整個(gè)頁(yè)面內(nèi)的這個(gè)標(biāo)簽都會(huì)沿用同一個(gè)樣式。
方法二
javascript文件
腳本可改動(dòng)的部分
CSS
.hovereffect{
Background: #CCC;
}
在需要應(yīng)用效果的地方用class="hovereffect"調(diào)用。這種方法比較靈活。
方法三
使用網(wǎng)上常見(jiàn)的onmouseover、onmouseout這類(lèi)東西，行為和結(jié)構(gòu)不分離，不推薦使用。
方法一
javascript文件，來(lái)自Htmldog .
示例代碼 [www.ghpqjb.com]
function suckerfish(type, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
}
sfHover = function(sfEls) {
for (var i=0; i < sfEls.length; i ) {
sfEls[i].onmouseover=function() {
this.className =" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
sfFocus = function(sfEls) {
for (var i=0; i < sfEls.length; i ) {
sfEls[i].onfocus=function() {
this.className =" sffocus";
}
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
}
}
}
suckerfish(sfHover, "INPUT");
suckerfish(sfFocus, "INPUT");
suckerfish(sfHover, "p");
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
}
sfHover = function(sfEls) {
for (var i=0; i < sfEls.length; i ) {
sfEls[i].onmouseover=function() {
this.className =" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
sfFocus = function(sfEls) {
for (var i=0; i < sfEls.length; i ) {
sfEls[i].onfocus=function() {
this.className =" sffocus";
}
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
}
}
}
suckerfish(sfHover, "INPUT");
suckerfish(sfFocus, "INPUT");
suckerfish(sfHover, "p");
腳本可改動(dòng)的部分
示例代碼 [www.ghpqjb.com]
//這里寫(xiě)入你需要效果的標(biāo)簽
suckerfish(sfHover, "INPUT");
suckerfish(sfFocus, "INPUT");
suckerfish(sfHover, "p");
suckerfish(sfHover, "INPUT");
suckerfish(sfFocus, "INPUT");
suckerfish(sfHover, "p");
CSS
示例代碼 [www.ghpqjb.com]
input:focus,input.sffocus {
background: #F8F8F8;
color: #333333;
border: 1px solid red;
}
input:hover,input.sfhover{
background: #EEE;
color: #369;
border: 1px solid #069;
}
p:hover,p.sfhover{
background: #EEE;
color: #333;
border: 1px solid #069;
}
p:hover,p.sfhover{
background: #EEE;
color: #333;
}
background: #F8F8F8;
color: #333333;
border: 1px solid red;
}
input:hover,input.sfhover{
background: #EEE;
color: #369;
border: 1px solid #069;
}
p:hover,p.sfhover{
background: #EEE;
color: #333;
border: 1px solid #069;
}
p:hover,p.sfhover{
background: #EEE;
color: #333;
}
上面代碼中第一個(gè)類(lèi)是給支持CSS2的瀏覽器，第二個(gè)是給IE6及以下版本的。需注重的是，你給某標(biāo)簽設(shè)定了，那么整個(gè)頁(yè)面內(nèi)的這個(gè)標(biāo)簽都會(huì)沿用同一個(gè)樣式。
方法二
javascript文件
示例代碼 [www.ghpqjb.com]
var W3CDOM = (document.createElement && document.getElementsByTagName);
//window.onload = pinballEffect;
function pinballEffect()
{
if (!W3CDOM) return;
var allElements = document.getElementsByTagName('*');
var originalBackgrounds=new Array();
for (var i=0; i < allElements.length; i )
{
if (allElements[i].className.indexOf('hovereffect') !=-1)
{
allElements[i].onmouseover = mouseGoesOver;
allElements[i].onmouseout = mouseGoesOut;
}
}
}
function mouseGoesOver()
{
originalClassNameString = this.className;
this.className = " lay-on";
}
function mouseGoesOut()
{
this.className = originalClassNameString;
}
pinballEffect();
//window.onload = pinballEffect;
function pinballEffect()
{
if (!W3CDOM) return;
var allElements = document.getElementsByTagName('*');
var originalBackgrounds=new Array();
for (var i=0; i < allElements.length; i )
{
if (allElements[i].className.indexOf('hovereffect') !=-1)
{
allElements[i].onmouseover = mouseGoesOver;
allElements[i].onmouseout = mouseGoesOut;
}
}
}
function mouseGoesOver()
{
originalClassNameString = this.className;
this.className = " lay-on";
}
function mouseGoesOut()
{
this.className = originalClassNameString;
}
pinballEffect();
腳本可改動(dòng)的部分
示例代碼 [www.ghpqjb.com]
if (allElements[i].className.indexOf('hovereffect') !=-1)
CSS
示例代碼 [www.ghpqjb.com]
.hovereffect{
Background: #CCC;
}
在需要應(yīng)用效果的地方用class="hovereffect"調(diào)用。這種方法比較靈活。
方法三
使用網(wǎng)上常見(jiàn)的onmouseover、onmouseout這類(lèi)東西，行為和結(jié)構(gòu)不分離，不推薦使用。
相關(guān)Web標(biāo)準(zhǔn)教程：
- Web標(biāo)準(zhǔn)：需要正確的使用H1~ H6標(biāo)簽
- 五個(gè)WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML)，表現(xiàn)(CSS)，行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類(lèi)型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對(duì)SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語(yǔ)：開(kāi)始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
- Webdevelopmentmistakes-web設(shè)計(jì)與開(kāi)發(fā)常見(jiàn)錯(cuò)誤
- CSS標(biāo)準(zhǔn)系列用CSS制作“鼠標(biāo)經(jīng)過(guò)圖像”
- 高性能表現(xiàn)的div css網(wǎng)站
- 高性能表現(xiàn)的div+css網(wǎng)站
- CSS網(wǎng)友：關(guān)于WEB標(biāo)準(zhǔn)化過(guò)程中的語(yǔ)義化描述！
- 用css和js實(shí)現(xiàn)firefox和IE支持局部打印
- Web2.0大展評(píng)出五個(gè)全球最佳網(wǎng)站
- WEB2.0標(biāo)準(zhǔn)教程：第七天 CSS入門(mén)
- 網(wǎng)頁(yè)標(biāo)準(zhǔn)化-CSS命名規(guī)劃整理
- WEB2.0標(biāo)準(zhǔn)教程：第二天 什么是名字空間
- 相關(guān)鏈接：
- 教程說(shuō)明：
Web標(biāo)準(zhǔn)教程-解決IE7以下版本不支持無(wú)A狀態(tài)偽類(lèi)的幾種方法！
。