Hover伪类在IE6中的实现
生活随笔
收集整理的這篇文章主要介紹了
Hover伪类在IE6中的实现
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
??????鼠標滑過行，行改變顏色可以使用javascript寫，onmouseover，onmouseout，也可以使用css2的偽類hover，但是ie6對偽類支持的不好，需要變換一下思路，要么使用javascript，onmouseover就變?yōu)橐粋€樣式，onmouseout在變回去，上一篇文章中轉(zhuǎn)載了一個例子，本文還是用css來實現(xiàn)
??????下面是我寫的一個例子，大家可以擴展它。
???????
?
Core.cssbody
{
????font-size:12px;
}
.ms-kb-protalWebPartTitleArea
{
????background:?url(_layouts/2052/IMAGES/EVENTS/globalBreadcrumb.gif)?top?left?repeat-x;
????font-size:15px;
}
.ms-kb-portalWebPartContentArea
{
????font-size:12px;
????width:365px;
}
.ms-kb-portalWebPartContentArea?tr
{
????
}
.ms-kb-portalWebPartContentArea?tr:hover
{
???background-color:Red;
???font-size:20px;
??/*?display:block;*/
}
.hoverClass
????????{
????????}
????????.hover
????????{
????????????display:block;
????????????background-color:Red;
????????????font-size:20px;
????????}
???????
?
?
?
PortalWebPart.ascx<%@?Control?Language="C#"?AutoEventWireup="true"?CodeBehind="PortalWebPart.ascx.cs"?Inherits="WebApp.PortalWebPart"?%>
<link?href="Css/core.css"?rel="stylesheet"?type="text/css"?/>
<script?type="text/javascript"?src="Css/jquery-1.3.2-vsdoc.js">
</script>
?<script?type="text/javascript">
?????$(function()?{
?????????$(".hoverClass?tr").hover(
????????????function()?{
????????????????$(this).addClass("hover");
????????????},?function()?{
????????????????$(this).removeClass("hover");
????????????});
?????})
????</script>
<div>
????<table?class="ms-kb-protalWebPartTitleArea">
????????<tr>
????????????<td>
????????????????<img?alt=""?src="Images/bgPortalWebPartTitle.gif"?
????????????????style="width:?365px;?height:?26px"?/>任務
????????????</td>
????????</tr>????
????</table>
????<table?class="ms-kb-portalWebPartContentArea?hoverClass">
????????<tr?style="width:?365px;?height:?26px"><td><a?href="#">購買打印器材</a></td></tr>
????????<tr?style="width:?365px;?height:?26px"><td><a?href="#">準備外出演示文檔</a></td></tr>
????????<tr?style="width:?365px;?height:?26px"><td><a?href="#">計劃項目方案</a></td></tr>
????????<tr?style="width:?365px;?height:?26px"><td><a?href="#">制定下半年計劃</a></td></tr>
????????
????</table>
</div>
?
?
??????上面的列子參考了下面的實現(xiàn)技巧
?
??????
hover偽類在ie6下的處理方式<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!--?saved?from?url=(0049)http://www.cssrain.cn/demo/ie6hover/ie6hover.html?-->
<HTML?
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>hover偽類在ie6下的處理方式</TITLE>
<META?content="text/html;?charset=utf-8"?http-equiv=Content-Type>
<STYLE?type=text/css>*?{
????PADDING-BOTTOM:?0px;?MARGIN:?0px;?PADDING-LEFT:?0px;?PADDING-RIGHT:?0px;?PADDING-TOP:?0px
}
BODY?{
????TEXT-ALIGN:?center;?FONT:?12px/1.6em?宋體,?Verdana,?serif,?sans-serif;?BACKGROUND:?white;?COLOR:?black
}
IMG?{
????BORDER-BOTTOM:?0px;?BORDER-LEFT:?0px;?BORDER-TOP:?0px;?BORDER-RIGHT:?0px
}
UL?{
????LIST-STYLE-TYPE:?none;?LIST-STYLE-IMAGE:?none
}
OL?{
????LIST-STYLE-TYPE:?none;?LIST-STYLE-IMAGE:?none
}
H1?{
????LINE-HEIGHT:?30px;?HEIGHT:?30px;?FONT-SIZE:?14px
}
.productList?{
????TEXT-ALIGN:?left;?MARGIN:?50px?auto?0px;?WIDTH:?420px;?HEIGHT:?400px
}
.product?{
????POSITION:?relative;?WIDTH:?200px;?DISPLAY:?inline;?FLOAT:?left;?MARGIN-LEFT:?10px
}
.product?IMG?{
????BORDER-BOTTOM:?silver?1px?solid;?BORDER-LEFT:?silver?1px?solid;?PADDING-BOTTOM:?19px;?PADDING-LEFT:?19px;?PADDING-RIGHT:?19px;?BORDER-TOP:?silver?1px?solid;?BORDER-RIGHT:?silver?1px?solid;?PADDING-TOP:?19px
}
.other-info?{
????POSITION:?absolute;?FILTER:?progid:DXImageTransform.Microsoft.Alpha(opacity=80);?PADDING-BOTTOM:?0px;?PADDING-LEFT:?10px;?WIDTH:?180px;?PADDING-RIGHT:?10px;?DISPLAY:?none;?BACKGROUND:?#cfdde8?0%?50%;?MARGIN-LEFT:?0px;?TOP:?161px;?PADDING-TOP:?0px;?LEFT:?0pt;?opacity:?0.8
}
.product:hover?.other-info?{
????DISPLAY:?block
}
.hover?.other-info?{
????DISPLAY:?block
}
</STYLE>
<SCRIPT?type=text/javascript?
src="hover偽類在ie6下的處理方式_files/jquery-1[1].2.1.pack.js"></SCRIPT>
<SCRIPT?language=JavaScript>
????<!--
????????$(function(){
????????????$(".hoverClass").hover(
????????????function(){
????????????????$(this).addClass("hover");
????????????},function(){
????????????????$(this).removeClass("hover");
????????????});
????????})
????//-->
????</SCRIPT>
<META?name=GENERATOR?content="MSHTML?8.00.6001.18702"></HEAD>
<BODY>
<H1>IE6下的hover偽類處理</H1>
<DIV?class=productList>
<UL>
??<LI?class="product?hoverClass">
??<DIV?class=productInfo>
??<DIV?class=productPic><A?
??href="http://www.cssrain.cn/demo/ie6hover/ie6hover.html#"><IMG?alt=多普達?
??src="hover偽類在ie6下的處理方式_files/t.jpg">?</A></DIV>
??<DIV?class=productName><SPAN>商品名稱：</SPAN>多普達手機?</DIV>
??<DIV>其他關(guān)于產(chǎn)品的信息，把鼠標移向這里。?</DIV></DIV>
??<DIV?class=other-info>
??<UL>
????<LI>價格：￥2300.00元?</LI>
????<LI>操作系統(tǒng)：Windows?Mobile?6</LI></UL></DIV></LI>
??<LI?class="product?hoverClass">
??<DIV?class=productInfo>
??<DIV?class=productPic><A?
??href="http://www.cssrain.cn/demo/ie6hover/ie6hover.html#"><IMG?alt=多普達?
??src="hover偽類在ie6下的處理方式_files/t.jpg">?</A></DIV>
??<DIV?class=productName><SPAN>商品名稱：</SPAN>多普達手機?</DIV>
??<DIV>其他關(guān)于產(chǎn)品的信息，把鼠標移向這里。?</DIV></DIV>
??<DIV?class=other-info>
??<UL>
????<LI>價格：￥2300.00元?</LI>
????<LI>操作系統(tǒng)：Windows?Mobile?6</LI></UL></DIV></LI></UL></DIV><PRE>淘寶效果預覽：<A?href="http://list.mall.taobao.com/1343/g-s-----40-0--1343.htm">http://list.mall.taobao.com/1343/g-s-----40-0--1343.htm</A><BR>
其實，問題很簡單，就是hover偽類在IE6中得不到很好的支持，<BR>
因為IE6只支持css1，而在css1中hover偽類只能針對a標簽來起作用，<BR>
看了一下淘寶的代碼，他們的解決方法是：<BR>
首先，按照ie7/FF都支持的css2的寫法來寫。<BR>
其次針對IE6不支持css2再做特殊處理。也就是通過javascript來彌補ie6下的不足。<BR>
這段javascript的原理是這樣的：<BR>
code:<BR>
根據(jù)某些特征找到需要添加hover效果的標簽,<BR>
對此標簽添加onmouseover和onmouseout事件,<BR>
在onmouseover事件中給對象賦予新的css?class屬性，<BR>
同樣，在onmouseout時移除該css?class即可模擬成hover偽類的效果了。<BR>
</PRE>轉(zhuǎn) <A?href="http://www.iwcn.net/">大偉's?Blog</A>?</BODY></HTML>
?
轉(zhuǎn)載于:https://www.cnblogs.com/virusswb/articles/1438716.html
總結(jié)
以上是生活随笔為你收集整理的Hover伪类在IE6中的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在网页中直接显示office文档,
- 下一篇： 实现table鼠标移动改变table行背