侃侃

大家应该都发现了，自己的等级提高了，我本来不怎么关注这件事情。（我只关注奖品）😆。但是看到一下子升了两级确实还是有点激动了这不我准备写一个hover属性的全集特效来庆祝一下。

展示

本次是第一篇，效果请看演示。

动画演示

hover介绍

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

hover和onmouseover的区别

hover ： 悬停可以指定两个函数功能1和功能2，鼠标移入触发功能1，移除触发函数2;

mouseover ：不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。 mouseenter ：只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。

这样的话，的mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。

mouseout : 不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件。

mouseleave : 只有在鼠标指针离开被选元素时，才会触发mouseleave事件。

综合所有：的mouseenter和鼠标离开定位更加精准，而鼠标悬停和鼠标移开时则会带动子元素一起改变

技术介绍

.ih-item.circle.effect1 .spinner {
    width: 230px;
    height: 230px;
    border: 10px solid #ecab18;
    border-right-color: #1ad280;
    border-bottom-color: #1ad280;
    border-radius: 50%;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.ih-item.circle.effect1 .img {
    position: absolute;
    top: 10px;
    bottom: 0;
    left: 10px;
    right: 0;
    width: auto;
    height: auto;
}

.ih-item.circle.effect1 .img:before {
    display: none;
}

.ih-item.circle.effect1.colored .info {
    background: #1a4a72;
    background: rgba(26, 74, 114, 0.6);
}

.ih-item.circle.effect1 .info {
    top: 10px;
    bottom: 0;
    left: 10px;
    right: 0;
    background: #333333;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.ih-item.circle.effect1 .info h3 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 55px 0 0 0;
    height: 110px;
    text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ih-item.circle.effect1 .info p {
    color: #bbb;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.ih-item.circle.effect1 a:hover .spinner {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ih-item.circle.effect1 a:hover .info {
    opacity: 1;
}

资源下载