CSS长距离翻转
日期：2014-05-17 浏览次数：20823 次
远距离翻转时一种鼠标悬停事件， 他在页面的其他地方触发显示方式的改变。 实现方法是：在锚链接内嵌套一个或多个元素； 然后使用绝对定位对嵌套的元素分别进行定位。
尽量显示在不同的地方，但是他们呢都包含在同一个父锚中，所以对于同一个鼠标悬停时间做出反应， 因此当鼠标悬停在一个元素上面时可以影响另一个元素的样式。
网页代码：
<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">»袁 杰</span>
</a>
</li>
<li class="xiaoxi">
<a href="#" title="孔祥熙">
<span class="hotspot"></span>
<span class="link">»孔祥熙</span>
</a>
</li>
<li class="mao">
<a href="#" title="毛奇立">
<span class="hotspot"></span>
<span class="link">»毛奇立</span>
</a
