-webkit-transition:属性不在bubble元素中?

时间:2013-03-03 04:31:28

标签: html css hover webkit-transition

我正在创建一个投资组合,我希望它能让每当有人盘旋在我的名字上时,会出现带箭头的气泡。我已经完成了那部分,但问题是-webkit-transition属性不起作用。泡泡离我的名字有点远,所以我想要它,这样需要一点时间再次隐藏,所以有人可以轻松地去做,因为我正在考虑制作一个表格来联系我。

我的HTML:

<div id="side-bar"><h1 id="ab_me">About Me</h1>
<img src="saksham.png" id="saksham">
<p id="name"><span>S</span>aksham <span>C</span>hauhan</p>

<div id="bubble">
SUP !
<div id="bubble-arrow-border">
</div>
<div id="bubble-arrow">
</div>
</div>

</div>

我的CSS:

div#side-bar p
{
font-size:25;
border-bottom:2px solid red;
position:absolute;
left:10px;
color:#F63737;
}
div#side-bar p:hover
{
border-bottom:2px groove #C01F1F;
color:#C01F1F;
text-shadow:0px 1px 2px #F98378;
-webkit-transition:1s;
}
div#side-bar p span
{
font-size:40px;
}
div#side-bar p:hover ~ #bubble
{
display:block;
visibility:visible;
opacity:1;
-webkit-transition:5s;
}
div#side-bar p #bubble:hover
{
display:block;
visibility:visible;
opacity:1;
}
#bubble
{
background-color:#EDEDED;
visibility:hidden;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
padding:10px;
position:absolute;
text-align:center;
width:300px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
z-index:100;
left:230px;
top:400px;
display:none;
-webkit-transition:5s;
opacity:0;
}
#bubble-arrow
{
border-color:transparent #EDEDED transparent transparent;
border-style: solid;
border-width: 15px;
height:0;
width:0;
position:absolute;
bottom:25px;
left:-28px;
z-index:100;
}
#bubble-arrow-border
{
border-color:transparent #666666 transparent transparent;
border-style: solid;
border-width: 15px;
height:0;
width:0;
position:absolute;
bottom:25px;
left:-31px;
}

3 个答案:

答案 0 :(得分:1)

当您使用transition时,您必须同时设置“之前”和“之后”状态(例如,您无法从空转换为opacity:0但您可以从opacity:1转移到opacity:0 {1}})。此外,您无法在display上进行转换,但可以在visibility上进行转换。

以下是有关过渡的更多信息:https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

答案 1 :(得分:0)

您必须告诉它要转换的属性。看起来你正试图这样做:

transition:all 1s ease;
-webkit-transition:all 1s ease;

答案 2 :(得分:0)

不要发布您的整个代码,只发布相关代码。

CSS转换不适用于display:none。当我不得不使用display:none时,我不得不使用Javascript来补充我的CSS。

因此,如果您从display:none删除#bubble,然后使用:

-webkit-transition:all 1000ms;

#bubble上,然后将#bubble:hover设置为将不透明度更改为1:

opacity:1;

你的泡泡会淡入,然后淡出。

http://jsfiddle.net/charlescarver/nrTMg/1/