欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 不能使用外部样式实现鼠标悬停改变样式
在网页布局中，有时我们不能直接使用外部CSS样式控制DIV样式，比如对a设置样式。
可以使用onMouseOver（鼠标移到目标上）和onMouseOut（鼠标移开目标后）实现对a标签或其它设置hover样式。
直接对标签使用即可，无论、、等均可。
&href=&/&&style=&color:#00F;&text-decoration:none&&onMouseOver=&this.style.color='#F00';this.style.textDecoration='underline'&&onMouseOut=&this.style.color='#00F';this.style.textDecoration='none'&DIVCSS5&
以上对a超链接代码设置默认样式、鼠标移到目标上、鼠标移开目标后样式。特点代码比较长。
DIVCSS5重要提示说明：为了看到鼠标移开后与默认样式相同，通常需要直接对标签使用style设置默认CSS样式并且与onMouseOut设置CSS样式保持相同。以免初始状态对象样式与鼠标移开对象后样式的不同。
如上代码：
style=&color:#00F;&text-decoration:none&&&
onMouseOut=&this.style.color='#00F';this.style.textDecoration='none'&&
设置默认#00F与不显示。
通过常规hover与不用外部hover实现hover样式设置方法案例如下
1、完整常规外部CSS案例展示代码：
&!DOCTYPE&&&&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&DIVCSS5实例&&.abc&a{&color:#00F;&text-decoration:none}&/*&默认abc盒子里超链接文字字体颜色为蓝色&没有下划线&*/&&.abc&a:hover{&color:#F00;&text-decoration:underline}&/*&鼠标悬停abc盒子里超链接文字上后字体颜色为红色&出现下划线&*/&&.bb{&color:#00F}&.bb:hover{&color:#F00;&font-weight:bold}&/*&直接对bb对象盒子设置hover&*/&&&&&class=&abc&&欢迎访问&href=&/&DIVCSS5网站！&&&&class=&bb&&默认我是蓝色，鼠标悬停时变红色并加粗。&&&&
2、与浏览器效果截图说明图
默认与鼠标悬停浏览器测试效果截图
3、外部CSS样式转换后
&!DOCTYPE&html&&&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&DIVCSS5实例&&&&class=&abc&&欢迎访问&&href=&/&&&style=&color:#00F;&text-decoration:none&&&onMouseOver=&this.style.color='#F00';this.style.textDecoration='underline'&&&onMouseOut=&this.style.color='#00F';this.style.textDecoration='none'&DIVCSS5网站！&&&&style=&color:#00F;&font-weight:normal&&onMouseOver=&this.style.color='#F00';this.style.fontWeight='bold'&&onMouseOut=&this.style.color='#00F';this.style.fontWeight='normal'&&默认我是蓝色，鼠标悬停时变红色并加粗。&&&&
4、使用onMouseOver和onMouseOut实现外部CSS hover样式截图
使用onMouseOver和onMouseOut实现外部CSS hover样式浏览器测试效果与说明截图
5、在线演示：（使用onMouseOver和onMouseOut转换后实例）
6、打包下载（包括了外部CSS与转换后）
7、特别说明：无论是a标签还是div标签、span标签、、等都可以直接在标签内使用onMouseOver和onMouseOut实现鼠标悬停移到对象上与移开后样式变化。需要注意是，一般为了初始默认状态与鼠标移开后样式保存一致，需要对标签内加设置CSS与onMouseOut（鼠标移开）设置样式CSS保存一致。
扩展阅读：
1、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 08:35
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;
欢迎您订阅我们的技术周刊
我们会向您分享我们精心收集整理的，最新的行业资讯，技术动态，外文翻译，热点文章;
我们使用第三方邮件列表向您推送，我们不保存您的任何个人资料，注重您的隐私，您可以随时退订,
欢迎分享您的观点，经验，技巧，心得
让我们一起找寻程序员的快乐，探索技术, 发现IT人生的乐趣;
本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG，请即时告知我们： ourjs(
订阅邮件周刊
有可能将CSS应用到一个字符的一半吗？
注意 转载须保留原文链接，译文链接，作者译者等信息。&&
给一个字符的一半设置样式。(在本例中,字符的一半是透明的)
下面是目前我所寻找和尝试的(没有运气找到):
将样式应用于字符或者字母的一半的方法用CSS或JavaScript给字符部分设置样式给字符的50%应用CSS
下面是一个例子,我想要获得的效果。
CSS或JavaScrip对于这个问题存在解决方案或者我将不得不借助于图片吗?我宁愿不去用图像，因为这本文最终将被动态生成。
因为很多人问我为什么会想要给字符的一半设计样式,这就是为什么。我的城市最近花了250000美元为自己定义一个新的“品牌”。这个标志就是他们想出的。许多人抱怨这太简单，缺乏创造力但是仍然继续这样做。我的目标是这个网站提出来当做一个玩笑。输入'Halifax',你就会明白我的意思。:)
下面是一些解决方案：
第一部分:基本解决方案
这适用于任何动态文本,或一个字符,并且都是自动的。所有您需要做的就是在目标文本添加一个类，其余的照顾一下就行。
同时, 为盲人或视力受损这类屏幕阅读的人保留了原文的可访问性。
一个字符的解释:
纯CSS。所有你需要做的就是为每一个你想设置一半样式的元素应用.halfStyle类。
对于每个包含这个字符的span元素,您可以创建一个数据属性,例如这里data-content = " X
",在伪元素上使用content:attr(data-content);因此,.halfStyle:before类将是动态的,你不需要为每个实例设置固定的值。
任意文本的解释：
只需给包含这种文本的元素添加textToHalfStyle类。
.halfStyle {&&& position:&&& display:inline-&&& font-size:80 /* or any font size will work */&&& color: /* or transparent, any color */&&& overflow:&&& white-space: /* to preserve the spaces from collapsing */}
.halfStyle:before {&&& display:&&& z-index:1;&&& position:&&& top:0;&&& left:0;&&& width: 50%;&&& content: attr(data-content); /* dynamic content for the pseudo element */&&& overflow:&&& color: #f00;}
(注* 观其代码，其原理为利用伪元素产生一个内容一样的字符，但是只有一半宽度，并与原位置重合即可实现这种效果，缺陷是不支持低版本的浏览器）&
Characters:&/p&&span
class="halfStyle" data-content="X"&X&/span&&span
class="halfStyle" data-content="Y"&Y&/span&&span
class="halfStyle" data-content="Z"&Z&/span&&span class="halfStyle"
data-content="A"&A&/span&&&hr/&&p&Automated:&/p&&&span
class="textToHalfStyle"&Half-style, please.&/span&
使其自动化,只需给包含这种文本的元素添加textToHalfStyle类。
jQuery实现的自动模式
jQuery(function($) {&&& var text, chars, $el, i,&&& // Iterate over all class occurences&&& $('.textToHalfStyle').each(function(idx, el) {&&&&&&& $el = $(el);&&&&&&& text = $el.text();&&&&&&& chars = text.split('');&&&&&&&& // Set the screen-reader text&&&&&&& $el.html('&span style="position: absolute !clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);"&' + text + '&/span&');&&&&&&&& // Reset output for appending&&&&&&& output = '';&&&&&&&& // Iterate over all chars in the text&&&&&&& for (i = 0; i & chars. i++) {&&&&&&&&&&& // Create a styled element for each character and append to container&&&&&&&&&&& output += '&span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '"&' + chars[i] + '&/span&';&&&&&&& }&&&&&&&& // Write to DOM only once&&&&&&& $el.append(output);&&& });});
第二部分:先进的解决方案——独立左边和右边部分
通过这个解决方案你可以单独的设置左边和右边部分的样式。一切都是相同的,只有更高级的CSS使出这种魔法。
.halfStyle {&&& position:&&& display:inline-&&& font-size:80 /* or any font size will work */&&& color: /* hide the base character */&&& overflow:&&& white-space: /* to preserve the spaces from collapsing */}.halfStyle:before { /* creates the left part */&&& display:&&& z-index:1;&&& position:&&& top:0;&&& width: 50%;&&& content: attr(data-content); /* dynamic content for the pseudo element */&&& overflow:&&& pointer-events: /* so the base char is selectable by mouse */&&& color: #f00; /* for demo purposes */&&& text-shadow: 2px -2px 0px #af0; /* for demo purposes */}.halfStyle:after { /* creates the right part */&&& display:&&& direction: /* very important, will make the width to start from right */&&& position:&&& z-index:2;&&& top:0;&&& left:50%;&&& width: 50%;&&& content: attr(data-content); /* dynamic content for the pseudo element */&&& overflow:&&& pointer-events: /* so the base char is selectable by mouse */&&& color: #000; /* for demo purposes */&&& text-shadow: 2px 2px 0px #0 /* for demo purposes */}
第三部分:Mix-Match和改善
现在我们知道什么是可能的,让我们创造一些变化
-水平一半样式
.halfStyle {&&& position:&&& display:inline-&&& font-size:80 /* or any font size will work */&&& color: /* hide the base character */&&& overflow:&&& white-space: /* to preserve the spaces from collapsing */}.halfStyle:before { /* creates the top part */&&& display:&&& z-index:2;&&& position:&&& top:0;&&& height: 50%;&&& content: attr(data-content); /* dynamic content for the pseudo element */&&& overflow:&&& pointer-events: /* so the base char is selectable by mouse */&&& color: #f00; /* for demo purposes */&&& text-shadow: 2px -2px 0px #af0; /* for demo purposes */}.halfStyle:after { /* creates the bottom part */&&& display:&&& position:&&& z-index:1;&&& top:0;&&& height: 100%;&&& content: attr(data-content); /* dynamic content for the pseudo element */&&& overflow:&&& pointer-events: /* so the base char is selectable by mouse */&&& color: #000; /* for demo purposes */&&& text-shadow: 2px 2px 0px #0 /* for demo purposes */}
-竖直1/3部分样式
.halfStyle { /* base char and also the right 1/3 */&&& position:&&& display:inline-&&& font-size:80 /* or any font size will work */&&& color: /* hide the base character */&&& overflow:&&& white-space: /* to preserve the spaces from collapsing */&&& color: #f0f; /* for demo purposes */&&& text-shadow: 2px 2px 0px #0 /* for demo purposes */}.halfStyle:before { /* creates the left 1/3 */&&& display:&&& z-index:2;&&& position:&&& top:0;&&& width: 33.33%;&&& content: attr(data-content); /* dynamic content for the pseudo element */&&& overflow:&&& pointer-events: /* so the base char is selectable by mouse */&&& color: #f00; /* for demo purposes */&&& text-shadow: 2px -2px 0px #af0; /* for demo purposes */}.halfStyle:after { /* creates the middle 1/3 */&&& display:&&& z-index:1;&&& position:&&& top:0;&&& width: 66.66%;&&& content: attr(data-content); /* dynamic content for the pseudo element */&&& overflow:&&& pointer-events: /* so the base char is selectable by mouse */&&& color: #000; /* for demo purposes */&&& text-shadow: 2px 2px 0px #af0; /* for demo purposes */}
第四部分:准备生产
定制不同Half-Style样式集可在同一页面应用于所需的元素。您可以定义多个style-sets告诉插件使用哪一个。　
插件在目标元素. textToHalfStyle上使用数据属性data-halfstyle =
"[-CustomClassName -]”。自动完成所有必要的变化。　　&&所以,仅在包含文本的元素添加textToHalfStyle类和数据属性data-halfstyle
=“[-CustomClassName -]”。插件将完成剩下的工作。
在相同的页面上演示多个Half-Styles。
jQuery(function($) {&&& var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_&&&& // Iterate over all class occurrences&&& $('.textToHalfStyle').each(function(idx, halfstyle_el) {&&&&&&& $halfstyle_el = $(halfstyle_el);&&&&&&& halfstyle_style = $halfstyle_el.data('halfstyle');&&&&&&& halfstyle_text = $halfstyle_el.text();&&&&&&& halfstyle_chars = halfstyle_text.split('');&&&&&&&& // Set the screen-reader text&&&&&&& $halfstyle_el.html('&span style="position: absolute !clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);"&' + halfstyle_text + '&/span&');&&&&&&&& // Reset output for appending&&&&&&& halfstyle_output = '';&&&&&&&& // Iterate over all chars in the text&&&&&&& for (halfstyle_i = 0; halfstyle_i & halfstyle_chars. halfstyle_i++) {&&&&&&&&&&& // Create a styled element for each character and append to container&&&&&&&&&&& halfstyle_output += '&span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '"&' + halfstyle_chars[halfstyle_i] + '&/span&';&&&&&&& }&&&&&&&& // Write to DOM only once&&&&&&& $halfstyle_el.append(halfstyle_output);&&& });});
原文地址：
真是没有做不到只有想不到。
汉字可行？
@green_bird #4
这种方法理论就是同一位置的覆盖，只要是字符都可以实现，汉字肯定也行的，同样的运用到任何像图形地方也都没问题，不过内容的部分都需要进行相应的修改
&热门文章 - 分享最多
&相关阅读 - 编程技巧
&关键字 - 前端
&欢迎订阅 - 技术周刊
我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私，您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐，探索技术, 发现IT人生的乐趣;
我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊全国免费咨询电话：
平面设计培训
HTML5/大前端培训 120天改写
全能UIUE交互设计
> 如何运用CSS3把元素从一种样式变换为另一种样式？
如何运用CSS3把元素从一种样式变换为另一种样式？
文章作者：
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
请把鼠标移动到下面的元素上：
CSS3浏览器支持
浏览器支持
transition
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。
CSS3过渡它如何工作？
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
应用于宽度属性的过渡效果，时长为 2 秒：
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。
效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：
规定当鼠标指针悬浮于 &div& 元素上时：
注释：当指针移出元素时，它会逐渐变回原来的样式。
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：
向宽度、高度和转换添加过渡效果：
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
下面的表格列出了所有的转换属性：
transition
简写属性，用于在一个属性中设置四个过渡属性。
transition-property
规定应用过渡的 CSS 属性的名称。
transition-duration
定义过渡效果花费的时间。默认是 0。
transition-timing-function
规定过渡效果的时间曲线。默认是 &ease&。
transition-delay
规定过渡效果何时开始。默认是 0。
下面的两个例子设置所有过渡属性：
在一个例子中使用所有过渡属性：
transition-property:
transition-duration: 1s;
transition-timing-function:
transition-delay: 2s;
-moz-transition-property:
-moz-transition-duration:1s;
-moz-transition-timing-function:
-moz-transition-delay:2s;
-webkit-transition-property:
-webkit-transition-duration:1s;
-webkit-transition-timing-function:
-webkit-transition-delay:2s;
-o-transition-property:
-o-transition-duration:1s;
-o-transition-timing-function:
-o-transition-delay:2s;
与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：
transition: width 1s linear 2s;
-moz-transition:width 1s linear 2s;
-webkit-transition:width 1s linear 2s;
-o-transition:width 1s linear 2s;
本文仅为提供更多信息，不代表AAA数字艺术教育同意其观点或描述，如需转载请注明出处。
北京市海淀区中关村大街22号中科大厦A座五层沈阳市沈河区大西路一号文峰大厦六层
中关村站：地铁4号线中关村站C口出即到怀远门站：地铁1号线怀远门站B出口即到
bjaaa@aaaedu.cc
版权所有：AAA教育(北京漫动者教育科技有限公司)备案号：京ICP备号 / 辽ICP备号-1}