Databases
StackOverflow2013
Postsdbo
POTime out/fade delay on hover div mouseout?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTime out/fade delay on hover div mouseout?
    primarykey
    data
    text
    <p>I have a <code>div</code> that, when you hover over it, another one shows up in it's place. </p> <p>However, when you <code>mouseout</code> of the <code>div</code> the other <code>div</code> disappears as well. </p> <p>I need the <code>div</code> that shows up to hang around long enough for a mouse to be dragged over to it and then once the mouse is on the appeared <code>div</code>, it needs to stay visible so you can click links and read text, and then disappear on <code>mouseout</code>. </p> <p>I'm sure this can be done in JavaScript, but I can't figure out how to do it.</p> <p>If it makes much of a difference, which I'm sure it might, it's going on a JCINK forum, so JavaScript might be limited. If there's any way to do it in CSS, that would be even better. </p> <pre><code>#a:hover + #b { opacity: 1; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease; -ms-transition: all 1.5s ease; } #c:hover ~ #d { opacity: 1; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease; -ms-transition: all 1.5s ease; } #e:hover + #f { opacity: 1; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease; -ms-transition: all 1.5s ease; } #g:hover ~ #h { opacity: 1; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease; -ms-transition: all 1.5s ease; } </code></pre> <p>This is the CSS I am using currently to achieve my hover.</p> <p>My javascript currently looks like this:</p> <pre><code>&lt;script type="text/javascript" &gt; document.getElementById('b').onmouseover = function(){ document.getElementById('a').style.opacity=1; } document.getElementById('b').onmouseout = function(){ document.getElementById('a').style.opacity=0; } $('#a').hover( function(){ $('#d').css('opacity', '1') }, function() { $('#d').css('opacity', '') }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser3075119
    1. USuser3075119
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIf you can make a minimal working example at jsfiddle, it would help a lot. Otherwise have a look at the [`transition-delay` property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay)
      singulars
      1. POTime out/fade delay on hover div mouseout?
      1. USGabriele Petrioli
    2. COPlease post the relevant HTML and as mentioned if possible create a [**jsFiddle**](http://jsFiddle.net) to demonstrate the issue.
      singulars
      1. POTime out/fade delay on hover div mouseout?
      1. USNope
    3. COI did use the transition delay to stall the hover long enough to get the mouse on to it, but obviously, after the 3 seconds have gone by or whatever it is, the div continues it's fade out transition. The delay is fine, but after I get the mouse on to it, the transition needs to stop until they move the mouse away again. I'm sorry if that doesn't make much sense. I can't make a jsfiddle right now, as I am on a limited internet connection and the website is blocked.
      singulars
      1. POTime out/fade delay on hover div mouseout?
      1. USuser3075119
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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