css(或jQuery）悬停时淡入淡出

css (or jQuery) fade on hover?

本文关键字：淡入 淡出 悬停 jQuery css      更新时间：2023-09-26

不过，我最近一直在自学CSS和Javascript/jQuery。我更喜欢从已经存在的代码中学习。我目前的"项目"是：http://jsfiddle.net/wqc42v6p/

我试过这样的东西：

#Premise {visibility:hidden;}
#Premise:hover {visibility: visibile;}

没有结果。

我最终开始思考，如果前提div是隐藏的，也许不可能悬停在它上面。我也不知道如何使悬停在一个div上影响另一个div的可见性属性。即使这样做有效，我想鼠标也不会真的用：hover psuedo在div上悬停。。。所以它可能会逐渐消失。。。我的理论是这样的。我甚至不知道。就像我说的，我是自学成才的。

我还想让它在区域悬停时淡入，在悬停离开该区域时淡出。

您可以使用opacity:0和opacity:1

http://jsfiddle.net/p289a03w/

您可以使用'opacity'而不是'visibility'，并添加'transition'来声明转换时间。

试试这个：

#Premise {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    color: white;
    opacity: 0;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
#Premise:hover{
    opacity:1;
}

我觉得自己非常愚蠢。我找到了一种有效的方法：

#Premise {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    color: white;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s; 
}
#BlightOne:hover > #Premise{
    visibility: visible;
    opacity: 1;
}

抱歉打扰了。

相关文章：