CSS远距离翻转

最新推荐文章于 2021-06-04 18:25:13 发布

baiding1123

最新推荐文章于 2021-06-04 18:25:13 发布

阅读量1.2k

点赞数 1

分类专栏： CSS/CSS3 文章标签： Css 远距离翻转

本文链接：https://blog.csdn.net/baiding1123/article/details/8669581

版权

CSS/CSS3 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

远距离翻转时一种鼠标悬停事件，他在页面的其他地方触发显示方式的改变。实现方法是：在锚链接内嵌套一个或多个元素；然后使用绝对定位对嵌套的元素分别进行定位。

尽量显示在不同的地方，但是他们呢都包含在同一个父锚中，所以对于同一个鼠标悬停时间做出反应，因此当鼠标悬停在一个元素上面时可以影响另一个元素的样式。

网页代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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{
	border:5px solid #ffffff;
	border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	box-shadow:5px 7px 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: 61px;
	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:4em;
	right: -25em;
	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{
	display:block;
	border:1px dashed #FF3;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	}	
	/*同样给文本加上翻转样式*/
.remote a:hover .link,.remote a:focus .link{
	color:#ACF810;	
	}		

</style>
</head>

<body>
<div class="remote">
<img src="https://img-my.csdn.net/uploads/201311/03/1383460398_1696.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>
</li>

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

<li class="aliang">
<a href="#" title="李高亮">
<span class="hotspot"></span>
<span style="font-size:24px;color:#00ff00">»李高亮</span>
</a>
</li>
</ul>
</div>
</body>
</html>

本来是想做出效果的，费了很大力气还是没有做到。原因是CSDN博客发表中文章的代码是嵌套在一个</div>中的所以不能用<style type="text/css">标签，除非我能对这网站做点什么，把自己的CSS文件传上去等，故在标签中直接style=""控制元素样式，但是无法使用a:hover,a:focus之类的修饰，所以看不到翻转的效果，只要把上面代码粘一个html文件就能看到效果...你可以试着把鼠标放到图片中人物的脸上，会显示出名字。

baiding1123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS远距离翻转

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

扫一扫