This time wrote a lot of page code, in addition to some knowledge to repeat, but also learn some new things css, perhaps old things, but still hope to be useful to everyone.
In fact, there are a lot of CSS in the style of a application, because a tag is the only default can trigger the action of the tag, so many times you can use CSS to control A to achieve the effect of JS, such as today to introduce the CSS imitation title and ALT hint effect:
First of all, to analyze the characteristics of this effect, nothing more than a mouse hover when there is a hint layer containing the text, if the traditional JavaScript to achieve, it is necessary to set the object's onmouseover and onMouseOut properties, And if you think of the object as a attribute of link and hover, the problem is clearer, because as long as the object's Link property set to hide the hint layer, hover property set to the presentation of the hint layer, then the location of the hint layer where exactly? Of course, in the middle of a tag, the current approach is to put the hint content in the middle of the span tag and then contained inside a tag, and then set A:link and a:hover under different span styles.
The following code to tell you this simple principle:
<style>
. info {position:relative;background: #fff; color: #666; text-decoration:none;font-size:12px;width:150px;text-align: center;border:1px solid #ccc; height:25px;line-height:25px;} /* Set the properties of the link, be sure to set the relative to make the hint layer follow the link.
. info:hover {background: #eee; color: #333;}
. info span {Display:none}/* set normal span to hidden state */
. Info:hover Span/* Sets the span property under hover as a render state and sets the location of the hint layer */{display:block;position:absolute;top:30px;left:60px;width : 130px;
border:1px solid #ff0000; Background: #fff; Color: #000;p adding:5px;text-align:left;}
</style>
<body>
<a class= "Info" href= "http://www.achome.cn" >www.achome.cn<span> This is my personal blog, there are some website design and production of Dongdong </span ></a>
<a class= "Info" href= "http://www.achome.cn" >www.achome.cn<span> This is my personal blog, there are some web design and production of dongdong, I hope we often come to communicate </span></a>
<a class= "Info" href= "http://www.achome.cn" >www.achome.cn<span> This is my personal blog, there are some web design and production of dongdong, I hope we often come to communicate </span></a>
<a class= "Info" href= "http://www.achome.cn" >www.achome.cn<span> This is my personal blog, there are some web design and production of dongdong, I hope we often come to communicate </span></a>
<a class= "Info" href= "http://www.achome.cn" >www.achome.cn<span> This is my personal blog, there are some web design and production of dongdong, I hope we often come to communicate </span></a>
</body>
Effect Demo:
Run Code Box
<style>.info {position:relative;background: #fff; color: #666; text-decoration:none;font-size:12px;width : 150px;text-align:center;border:1px solid #ccc; height:25px;line-height:25px;}. info:hover {background: #eee; color: #333;}. Info span {Display:none}.info:hover span {Display:block;position:absolute;top:30px;left:60px;width:130px;border : 1px solid #ff0000; Background: #fff; Color: #000;p adding:5px;text-align:left;} </style><body><a class= "Info" href= "http://www.achome.cn" >www.achome.cn<span> This is my personal blog, There are some web design and production of dongdong, I hope we often come to Exchange </span></a><a class= "info" href= "http://www.achome.cn" >www.achome.cn <span> This is my personal blog, there are some web design and production of dongdong, I hope we often come to Exchange </span></a><a class= "info" href= "http:// Www.achome.cn ">www.achome.cn<span> This is my personal blog, there are some web design and production of dongdong, I hope we often come to exchange </span></a><a class= "Info" href= "http://www.achome.cn" >www.achome.cn<span> This is my personal blog, there are some web design and production of dongdong, I hope we often come to exchange </ Span></a><a class= "Info" href= "hTtp://www.achome.cn ">www.achome.cn<span> This is my personal blog, there are some web design and production of dongdong, I hope we often come to exchange </span></a> </body>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
