当前位置：Gxlcms > html代码 > 一个简单的悬停效果（html）

一个简单的悬停效果（html）

时间：2021-07-01 10:21:17 帮助过：80人阅读

Win7、 Firefox 11打开 demo(小心撞墙 ) 更多的效果可以参考 Gxl网。

  1. body {
  2.     background: #000;
  3.     overflow-y: scroll;
  4.   }
  5.   .items {
  6.     margin: 40px auto;
  7.     width: 1110px;
  8.   }
  9.   a {
  10.     color: #FFF;
  11.     cursor: pointer;
  12.     margin: 0 0 20px 620px;
  13.     text-align: center;
  14.     text-decoration: none;
  15.   }
  16.   a:HOVER {
  17.     color: red;
  18.   }
  19.   a:HOVER ~ p.items {
  20.     border: 1px solid #FFF;
  21.     background: url('http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg') no-repeat scroll center center transparent;
  22.     height: 500px;
  23.   }
  24.   a:HOVER ~ p.items > *{
  25.     display: none;
  26.   }
  27.   .item {
  28.     border: 10px solid #FFF;
  29.     cursor: pointer;
  30.     float: left;
  31.     height: 231px;
  32.     width: 350px;
  33.     
  34.     -moz-transform: scale(0.8);
  35.     -moz-transition: all 0.5s ease-in-out 0s;
  36.   }
  37.   .item > p {
  38.     background: rgba(0,0,0,0.7);
  39.     height: 100%;
  40.     left: 0;
  41.     position: absolute;
  42.     top: 0;
  43.     width: 100%;
  44.     
  45.     -moz-transition: all 0.5s ease-in-out 0s;
  46.   }
  47.   .item:HOVER {
  48.     -moz-transform: scale(1);
  49.   }
  50.   .item-1:HOVER > p {
  51.     height: 0%
  52.   }
  53.   .item-2:HOVER > p {
  54.     height: 0%;
  55.     top: 50%;
  56.   }
  57.   .item-3:HOVER > p {
  58.     height: 0%;
  59.     left: 50%;
  60.     top: 50%;
  61.     width: 0%;
  62.   }
  63.   .item-4:HOVER > p {
  64.     height: 0%;
  65.     left: 50%;
  66.     top: 50%;
  67.     width: 0%;
  68.     
  69.     -moz-transform: rotate(360deg);
  70.   }
  71.   .item-5:HOVER > p {
  72.     height: 0%;
  73.     left: 50%;
  74.     top: 50%;
  75.     width: 0%;
  76.     
  77.     -moz-transform: rotate(-360deg);
  78.   }
  79.   .item-6 > p {
  80.     height: 50%;
  81.     width: 50%;
  82.   }
  83.   .item-6 > p:NTH-CHILD(2) {
  84.     left: 50%;
  85.     top: 0;
  86.   }
  87.   .item-6 > p:NTH-CHILD(3) {
  88.     left: 0;
  89.     top: 50%;
  90.   }
  91.   .item-6 > p:NTH-CHILD(4) {
  92.     left: 50%;
  93.     top: 50%;
  94.   }
  95.   .item-6:HOVER > p {
  96.     height: 0;
  97.     width: 0;
  98.     /*-moz-transform: rotate(-360deg);*/
  99.   }
  100.   .item-6:HOVER > p:NTH-CHILD(2) {
  101.     left: 100%;
  102.     /*-moz-transform: rotate(360deg);*/
  103.   }
  104.   .item-6:HOVER > p:NTH-CHILD(3) {
  105.     top: 100%;
  106.   }
  107.   .item-6:HOVER > p:NTH-CHILD(4) {
  108.     left: 100%;
  109.     top: 100%;
  110.     /*-moz-transform: rotate(360deg);*/
  111.   }
  112.   .clear:AFTER {
  113.     clear: both;
  114.     content: '\0020';
  115.     display: block;
  116.     height: 0;
  117.     overflow: hidden;
  118.     visibility: hidden;
  119.     width: 0;
  120.   }
  121.   #preloader {
  122.     background-image: url('http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg');
  123.     height: 0;
  124.     width: 0;
  125.   }

4. [代码][HTML]

  1. <body>
  2.   <a class="clear">请不要点我。</a>
  3.   <p class="items clear">
  4.     <p class="item item-1">
  5.       <p></p>
  6.       <img src="350x231/1.jpg" alt="" />
  7.     </p>
  8.     <p class="item item-2">
  9.       <p></p>
  10.       <img src="350x231/2.jpg" alt="" />
  11.     </p>
  12.     <p class="item item-3">
  13.       <p></p>
  14.       <img src="350x231/3.jpg" alt="" />
  15.     </p>
  16.     <p class="item item-4">
  17.       <p></p>
  18.       <img src="350x231/4.jpg" alt="" />
  19.     </p>
  20.     <p class="item item-5">
  21.       <p></p>
  22.       <img src="350x231/5.jpg" alt="" />
  23.     </p>
  24.     <p class="item item-6">
  25.       <p></p>
  26.       <p></p>
  27.       <p></p>
  28.       <p></p>
  29.       <img src="350x231/6.jpg" alt="" />
  30.     </p>
  31.   </p>
  32.   <p id="preloader"></p>
  33. </body>

以上就是一个简单的悬停效果（html）的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！