Databases
StackOverflow2013
Postsdbo
PO-webkit-transition: property isn't working in a bubble element?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO-webkit-transition: property isn't working in a bubble element?
    text
    copied!<p>I was creating a portfolio, and I want it so that whenever someone hovers over my name, a bubble with an arrow appears. I've done that part already, but the problem is that the <code>-webkit-transition</code> property isn't working. The bubble is a little far to my name so I want it so that it takes a little bit of time to hide again, so someone can go to it easily because I'm thinking of making a form to contact me in it.</p> <p>My HTML:</p> <pre><code>&lt;div id="side-bar"&gt;&lt;h1 id="ab_me"&gt;About Me&lt;/h1&gt; &lt;img src="saksham.png" id="saksham"&gt; &lt;p id="name"&gt;&lt;span&gt;S&lt;/span&gt;aksham &lt;span&gt;C&lt;/span&gt;hauhan&lt;/p&gt; &lt;div id="bubble"&gt; SUP ! &lt;div id="bubble-arrow-border"&gt; &lt;/div&gt; &lt;div id="bubble-arrow"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>My CSS:</p> <pre><code>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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload