标签：tag 编辑 text 技术分享 mouseover span for images osi
JS代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
margin-top: 10px;
width: 150px;
padding: 10px;
position: relative;
}
.wrap span:nth-of-type(1){
vertical-align: bottom;
display: inline-block;
border: 1px solid black;
padding: 10px;
transition: 0.5s;
}
.wrap span:nth-of-type(2){
height: 17px;
vertical-align: bottom;
display: inline-block;
padding: 10px;
padding-left: 100px;
border-bottom: 1px solid black;
transition: 0.5s;
}
.wrap span:nth-of-type(3){
display: inline-block;
position: absolute;
left: 50px;
top: 22px;
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<span>?</span><span></span><span> Read More</span>
</div>
</body>
<script>
var oDiv = document.getElementById("wrap");
var Span1 = document.getElementsByTagName("span")[0];
var Span2 = document.getElementsByTagName("span")[1];
var Span3= document.getElementsByTagName("span")[2];
oDiv.onmouseover = function(){
oDiv.style.color ="red";
Span1.style.borderColor="red";
Span1.style.transform="rotateX(180deg)";
Span2.style.borderColor="red";
Span2.style.transform="rotateX(180deg)";
oDiv.onmouseout = function(){
oDiv.style.color ="";
Span1.style.borderColor="";
Span1.style.transform="";
Span2.style.borderColor="";
Span2.style.transform="";
}
}
</script>
</html>
无JS,用伪类编辑的css代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.sp:hover{
color: red;
}
.sp:hover:before,
.sp:hover:after {
color: red;
transform: rotateX(180deg);
border-color: red;
}
.sp:before {
transition:0.5s;
padding: 10px;
content: ‘?‘;
border: 1px solid black;
display: inline-block;
}
.sp:after {
content: ‘ ‘;
width: 80px;
transition:0.5s;
padding: 19px;
position: relative;
top: 14px;
left: -96px;
border-bottom: 1px solid black;
display: inline-block;
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<span class="sp"> Read More</span>
</div>
</body>
</html>
效果:
标签：tag 编辑 text 技术分享 mouseover span for images osi
原文地址：http://www.cnblogs.com/sn5diphone6/p/6142470.html
