search

Home >Web Front-end >HTML Tutorial >A simple hover effect (html)

A simple hover effect (html)

零下一度
零下一度Original
2017-04-28 15:30:282214browse

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

A simple hover effect (html)

body {
    background: #000;
    overflow-y: scroll;
  }
  .items {
    margin: 40px auto;
    width: 1110px;
  }
  a {
    color: #FFF;
    cursor: pointer;
    margin: 0 0 20px 620px;
    text-align: center;
    text-decoration: none;
  }
  a:HOVER {
    color: red;
  }
  a:HOVER ~ p.items {
    border: 1px solid #FFF;
    background: url('http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg') no-repeat scroll center center transparent;
    height: 500px;
  }
  a:HOVER ~ p.items > *{
    display: none;
  }
  .item {
    border: 10px solid #FFF;
    cursor: pointer;
    float: left;
    height: 231px;
    width: 350px;
    
    -moz-transform: scale(0.8);
    -moz-transition: all 0.5s ease-in-out 0s;
  }
  .item > p {
    background: rgba(0,0,0,0.7);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    
    -moz-transition: all 0.5s ease-in-out 0s;
  }
  .item:HOVER {
    -moz-transform: scale(1);
  }
  .item-1:HOVER > p {
    height: 0%
  }
  .item-2:HOVER > p {
    height: 0%;
    top: 50%;
  }
  .item-3:HOVER > p {
    height: 0%;
    left: 50%;
    top: 50%;
    width: 0%;
  }
  .item-4:HOVER > p {
    height: 0%;
    left: 50%;
    top: 50%;
    width: 0%;
    
    -moz-transform: rotate(360deg);
  }
  .item-5:HOVER > p {
    height: 0%;
    left: 50%;
    top: 50%;
    width: 0%;
    
    -moz-transform: rotate(-360deg);
  }
  .item-6 > p {
    height: 50%;
    width: 50%;
  }
  .item-6 > p:NTH-CHILD(2) {
    left: 50%;
    top: 0;
  }
  .item-6 > p:NTH-CHILD(3) {
    left: 0;
    top: 50%;
  }
  .item-6 > p:NTH-CHILD(4) {
    left: 50%;
    top: 50%;
  }
  .item-6:HOVER > p {
    height: 0;
    width: 0;
    /*-moz-transform: rotate(-360deg);*/
  }
  .item-6:HOVER > p:NTH-CHILD(2) {
    left: 100%;
    /*-moz-transform: rotate(360deg);*/
  }
  .item-6:HOVER > p:NTH-CHILD(3) {
    top: 100%;
  }
  .item-6:HOVER > p:NTH-CHILD(4) {
    left: 100%;
    top: 100%;
    /*-moz-transform: rotate(360deg);*/
  }
  .clear:AFTER {
    clear: both;
    content: '\0020';
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
  }
  #preloader {
    background-image: url('http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg');
    height: 0;
    width: 0;
  }

4. [代码][HTML]

<body>
  <a class="clear">请不要点我。</a>
  <p class="items clear">
    <p class="item item-1">
      <p></p>
      <img src="350x231/1.jpg" alt="" />
    </p>
    <p class="item item-2">
      <p></p>
      <img src="350x231/2.jpg" alt="" />
    </p>
    <p class="item item-3">
      <p></p>
      <img src="350x231/3.jpg" alt="" />
    </p>
    <p class="item item-4">
      <p></p>
      <img src="350x231/4.jpg" alt="" />
    </p>
    <p class="item item-5">
      <p></p>
      <img src="350x231/5.jpg" alt="" />
    </p>
    <p class="item item-6">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <img src="350x231/6.jpg" alt="" />
    </p>
  </p>
  <p id="preloader"></p>
</body>

The above is the detailed content of A simple hover effect (html). For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to get html based on specified clipboard?Next article：How to get html based on specified clipboard?

Related articles

See more