首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS长距离翻转

2013-03-14 
CSS远距离翻转远距离翻转时一种鼠标悬停事件, 他在页面的其他地方触发显示方式的改变。 实现方法是:在锚链

CSS远距离翻转

远距离翻转时一种鼠标悬停事件, 他在页面的其他地方触发显示方式的改变。 实现方法是:在锚链接内嵌套一个或多个元素; 然后使用绝对定位对嵌套的元素分别进行定位。
尽量显示在不同的地方,但是他们呢都包含在同一个父锚中,所以对于同一个鼠标悬停时间做出反应, 因此当鼠标悬停在一个元素上面时可以影响另一个元素的样式。

网页代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>远距离翻转</title>
<style type="text/css">
.remote{
 width:333px;
 height:500px;
 position:relative;/*The key to this Technique*/
 }
.remote img{
 box-shadow:3px 5px 7px #666666; /*给如片加上投影,数字代表的意思为向右 向下 投影长度 颜色 */
 }
.remote ul{
 margin:0;
 padding:0;
 list-style:none;
 }
 /*首先要做的就是将热点的position属性设置为absolute,然后指定尺寸。 先定义默认尺寸,然后再后面地方再覆盖他们。*/
.remote a .hotspot{
 width: 53px;
 height: 73px;
 position: absolute;
 background-image: url(images/divide.PNG);/*防止IE和360没反应的Bug*/
 }
.remote .yuanjie a .hotspot{
 top: 224px;
 left: 458px;
 } 
.remote .xiaoxi a .hotspot{
 top: 153px;
 left: 57px;
 width: 70px;
 height: 96px;
 } 
.remote .mao a .hotspot{
 top: 208px;
 left: 395px;
 width: 62px;
 height: 76px;
 } 
.remote .chunge a .hotspot{
 top: 190px;
 left: 276px;
 width: 65px;
 height: 85px;
 } 
.remote .aliang a .hotspot{
 top: 203px;
 left: 563px;
 width: 61px;
 height: 76px;
 } 
 /*同样包含链接文本的span也进行绝对定位,并将宽度设置为15em. 他们的定位是相对于他们的列表的,在这个示例中用负的有位置和指定到图像的右边。 最后给链接设置光标样式,保证IE中正常显示。*/
 
 /*与前面一样先定义默认尺寸再在后面注意覆盖,处理完文字应该在正确的位置上*/
 
.remote a .link{
 position: absolute;
 display: block;
 width:10em;
 right: -31em;
 cursor: pointer;
 /*由于默认的链接样式较稳难看 ,所以我在这里改改*/
 font-family:"方正喵呜体","楷体";
 font-size: 24px;
 color:#8FCF06; 
 white-space:pre;/*不忽略 姓名文本中的空格*/
 }
.remote .yuanjie a .link{
 top:0;
 } 
.remote .xiaoxi a .link{
 top:1.2em;
 }
.remote .mao a .link{
 top:2.4em;
 }
.remote .chunge a .link{
 top:3.6em;
 } 
.remote .aliang a .link{
 top:4.8em;
 } 
/*.remote a:hover{
 background-color:rgba(0,0,0,0.5);RGBa不透明机制,前三种数字是红 绿 蓝 值,后一种是不透明度0.2表示是20%
 }*/
 /*为了鼠标悬停在文本上时出现翻转效果,给人物加上边框*/       
.remote a:hover .hotspot,.remote a:focus .hotspot{
 border:1px dashed white;
 } 
 /*同样给文本加上翻转样式*/
.remote a:hover .link,.remote a:focus .link{
 color:#EE3579;
 }  

</style>
</head>

<body>
<div class="remote">
<img src="images/Originals/IMG_0108.JPG" width="800" height="600" alt="哥几个" />

<ul>

<li class="yuanjie">
<a href="#" title="袁杰">
<span class="hotspot"></span>
<span class="link">&raquo;袁  杰</span>
</a>
</li>

<li class="xiaoxi">
<a href="#" title="孔祥熙">
<span class="hotspot"></span>
<span class="link">&raquo;孔祥熙</span>
</a>
</li>

<li class="mao">
<a href="#" title="毛奇立">
<span class="hotspot"></span>
<span class="link">&raquo;毛奇立</span>
</a>
</li>

<li class="chunge">
<a href="#" title="沈家椿">
<span class="hotspot"></span>
<span class="link">&raquo;沈家椿</span>
</a>
</li>

<li class="aliang">
<a href="#" title="李高亮">
<span class="hotspot"></span>
<span class="link">&raquo;李高亮</span>
</a>
</li>
</ul>
</div>
</body>
</html>

当鼠标停在人面部的位置或者名字上面时,相应的名字和面部会有效果:

CSS长距离翻转

 

热点排行