0

私はポートフォリオを作成していましたが、誰かが私の名前にカーソルを合わせるたびに、矢印の付いたバブルが表示されるようにしたいと考えています。私はすでにその部分を行っていますが、問題は-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;
}
4

3 に答える 3

1

を使用しているtransition場合は、「前」と「後」の両方の状態を設定する必要があります (たとえば、何もない状態から に​​遷移opacity:0することはできませんが、 からopacity:1に遷移することはできますopacity:0)。また、トランジションをオンにすることはできませんが、オンにdisplayすることはできますvisibility。

遷移についての詳細は次のとおりです: https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

于 2013-03-03T09:39:07.723 に答える
0

コード全体を投稿するのではなく、関連するコードのみを投稿してください。

CSSトランジションは。ではうまく機能しませんdisplay:none。を使用する必要があるときはdisplay:none、CSSを補足するためにJavascriptを使用する必要がありました。

したがって、から削除display:noneしてから#bubble使用する場合：

-webkit-transition:all 1000ms;

で、不透明度を1に変更する#bubbleように設定しました。#bubble:hover

opacity:1;

バブルはフェードインしてからフェードアウトします。

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

于 2013-03-03T16:16:21.830 に答える
0

移行するプロパティを指定する必要があります。これをやろうとしているようです：

transition:all 1s ease;
-webkit-transition:all 1s ease;
于 2013-03-03T04:34:56.120 に答える