与 :hover(鼠标离开时)的反义词是什么

有没有办法做与仅使用 CSS :hover相反的事情？如：如果:hover是on Mouse Enter，有没有等同于on Mouse Leave的CSS？

例：

我有一个使用列表项的 HTML 菜单。当我悬停其中一个项目时，有一个从#999到black的CSS颜色动画。当鼠标离开项目区域时，如何创建相反的效果，从black到#999的动画？

js小提琴

（请记住，我不想只回答这个例子，而是回答整个":hover相反"的问题。

如果我

理解正确，您可以通过将过渡移动到链接而不是悬停状态来做同样的事情：

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}
ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

悬停的定义是：

：悬停选择
器用于在鼠标悬停时选择元素他们。

根据该定义，悬停的反面是鼠标不在悬停上的任何点。比我聪明得多的人写了这篇文章，在两种状态下设置了不同的过渡 - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;
  /* HOVER OFF */
   -webkit-transition: padding 2s;
}
#thing:hover {
   padding: 20px;
   border-radius: 15px;
  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

相反的是使用:not

例如

selection:not(:hover) { rules }

只需使用 CSS 过渡而不是动画。

A {
    color: #999;
    transition: color 1s ease-in-out;
}
A:hover {
    color: #000;
}

现场演示

将持续时间放在非悬停选项中：

li a {
  background-color: #111;
  transition:1s;
}
li a:hover {
  padding:19px;
}

只需为您弄乱的元素添加一个过渡即可。请注意，页面加载时可能会有一些影响。就像您更改了边框半径一样，您将在加载 dom 时看到它。

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

不，CSS 中没有鼠标离开的显式属性。

您可以使用：悬停在除相关项目之外的所有其他元素上来实现此效果。但我不确定这有多实用。

我认为你必须看看一个JS/jQuery解决方案。

只需在类初始化上添加一个过渡和动画名称，在您的情况下，ul li a，只需添加一个"过渡"属性，这就是您所需要的

ul li {
    display: inline;
    margin-left: 20px;
}
ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}
ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}
@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>

使用transition的另一种方法是像这样指定毫秒数： transition: 500ms;

尝试以下代码片段

div{
  background: DeepSkyBlue;
  width:150px;
  height:100px;
  transition: 500ms;
}
div:hover{
  opacity: 0.5;
  cursor:pointer;
}

<div>HOVER ME</div>

您可以使用 CSS3 过渡

一些好的链接：

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

虽然这里的答案已经足够了，但我真的认为W3Schools在这个问题上的例子非常简单（它立即消除了（对我来说）的困惑）。

移动时，使用:hover选择器更改按钮的样式鼠标悬停在其上。

提示： 使用过渡持续时间属性确定 "悬停"效果：

例
.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}
.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

总之，对于您希望"进入"和"退出"动画相同的过渡，您需要在主选择器.button而不是悬停选择器.button:hover上使用过渡。对于您希望"进入"和"退出"动画不同的过渡，您需要指定不同的主选择器和悬停选择器过渡。

这将在

悬停时为.icon添加背景颜色，当鼠标指针离开元素时背景淡出。

.icon {
   transition: background-color 0.5s ease-in-out; /* this is important */
}
.icon:hover {
   background-color: rgba(169, 169, 169, 0.9);
}

你误解了:hover;它说鼠标在一个项目上，而不是鼠标刚刚进入该项目。

您可以在不:hover的情况下向选择器添加动画，以实现所需的效果。

过渡是更好的选择：http://jsfiddle.net/Cvx96/

:hover的反面似乎是:link 。

（编辑：技术上不是相反的，因为有4个选择器:link，:visited，:hover和:active。如果包括 :focus，则为 5

。

例如，在定义规则.button:hover{ text-decoration:none }删除按钮上的下划线时，在某些浏览器中按钮时会显示下划线。我已经用.button:hover, .button:link{ text-decoration:none }解决了这个问题

这当然仅适用于实际链接的元素（具有 href 属性）

相关内容

最新更新

热门标签：