1

This code, from a Fiddle at http://jsfiddle.net/8gC3D/471/ in an answer at Tooltip with HTML content without JavaScript) should produce an image which, when hovered over, disappears and causes another element to appear elsewhere on the page. But it makes my browser behave unpredictably. Sometimes there is no effect on hover, sometimes a delayed effect, or the effect is only achieved with some additional movement of the mouse etc.

<style>
#img {  }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;
}

#hoverme:hover { background-color:green;position:absolute   ;left:300px;top:100px;width:40%;height:20%;}
</style>

<body>
<p id="hoverme">
    <img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"> </img>
    <span id="thistext">LOCATZ!!!!</span>
</p>
</body>

In trying to understand what was happening, by simplification etc (substituting the IDs for CLASSES etc had no effect), I lastly substituted a div, with a red background, in place of the Deviant Art image. The behaviour only became even crazier:-

<style>
.img {
    background: red;
    width: 50px;
    height: 50px; }
.img:hover {visibility:hidden}
.thistext {font-size:22px; color:white}
.thistext:hover {color:black;}
.hoverme {width:50px;height:50px;
}
.hoverme:hover {
    background-color:green;
    position:absolute;
    left:300px;
    top:100px;
    width:40%;
    height:20%;
}
</style>

<body>
<p class="hoverme">
    <div class="img"></div>
    <span class="thistext">LOCATZ!!!!</span>
</p>
</body>

In my browser (FF) this generates a red square, on the LHS about 82px down the page. 1. Hovering over results in one of three behaviours: a) it disappears; b) it disappears and then reappears; c) the text "LOCATZ!!!!" is displayed beneath it. 2. Variously clicking or hovering on the red square or on the (invisible) red square's position, and then moving the cursor to the top left corner of the page, sometimes, makes the red square disappear, a red square appear in the top left corner, and a green rectangle 100px from the top and 300px from the left. These results seem unpredicatble/erratic.

What is wrong with the code and why does it so confuse the browser?!? I struggle to even get a repeatable behaviour.

UPDATE Thanks, Joseph Marikle, good to know, but fwiw I'm trying to learn about hover and visibility funcionality rather than to implement the code from Fiddle. I have been fiddling with the code to try and do this but can't see what is "wrong" with it.

Community
  • 1
  • 1
talvi
  • 39
  • 10
  • It's hard to discern what exactly is causing your issue and it might even be multiple issues with their own causes, but one thing I notice right away with your `.hoverme:hover` style rule is that it sets the left and top values on hover. This will affect its position and flow in the DOM, which will likely cause it to no longer trigger the `:hover` state. I've found this to result in very erratic behaviour such as flashing and jumping rapidly. I write this as a comment because it's not really a solution to your problem, but the first place I'd start is rethinking the absolute positioning. – Joseph Marikle Mar 22 '17 at 15:45
  • @ boltclock Hi, thanks for correcting the links but why did you delete the two tags: css-visibility and visibility (both are central features of the code) and left css and html which are "only" general? re the links, I'd have preferred to have had them as single words+URL but I don't know how to code that, nor your monicker, properly here. I have not found the crib sheet here for the markup..to date..hint. – talvi Mar 22 '17 at 15:49

0 Answers0