-webkit-transition：属性在bubble元素中不起作用？

我正在创建一个投资组合，我希望它能够让有人在我的名字周围盘旋时出现一个带箭头的泡泡。我已经完成了这部分，但问题是-webkit-transition属性不起作用。这个泡泡与我的名字有点相似，所以我想要它，所以需要一点时间才能再次隐藏，所以有人可以很容易地去找它，因为我正在考虑让表单与我联系。-webkit-transition：属性在bubble元素中不起作用？

我的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; 
}

来源

2013-03-03 Thakur Saksham Chauhan

你必须告诉它什么过渡性质。它看起来像你试图做到这一点：

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

来源

2013-03-03 04:34:56

没有工作兄弟，但thanx！ – 2013-03-03 04:53:47

我认为这是可选的，因为'property'和'timing-function'的'transition'属性的初始值是'all'和'ease' https://developer.mozilla.org/zh-CN/docs/CSS/transition – xpy 2013-03-03 09:35:09

当您使用transition你必须有这两种状态设置为“后”（例如，你从一无所有到opacity:0着的转变，但你可以从“之前”和opacity:1至opacity:0）。另外，您不能在display上进行转换，但可以在visibility上转换。

这里的一些关于转换：https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

来源

2013-03-03 09:39:07 xpy

好的，我获得了你的观点，但是我从来没有使用过后面的和之前的选择器......你能否想出一个合适的解决方案？并请尝试避免使用JavaScript。谢谢。 – 2013-03-03 11:31:31

我不是在讨论“之前”和“之后”选择器，而是在过渡之前和之后的元素状态，意思是“从”和“到”。更清楚一点：'#bubble {opacity：0}'是'from'状态，'#bubble：hover {opacity：1}是'to'状态。对不起，有任何困惑。 – xpy 2013-03-03 11:36:24

不要张贴整个代码，只有相关的代码。

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

所以，如果你从#bubble删除display:none，然后用：

-webkit-transition:all 1000ms;

在#bubble，然后有#bubble:hover组改变不透明度为1：

opacity:1;

你的泡沫会褪色在，然后淡出。

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

来源

2013-03-03 16:16:21 Charlie

-webkit-transition：属性在bubble元素中不起作用？

回答

相关问题