Почему поведение браузера "непредсказуемо" для этого переключателя CSS/HTML?
Этот код из Fiddle по адресу http://jsfiddle.net/8gC3D/471/ в ответе на всплывающей подсказке с содержимым HTML без JavaScript) должен создавать изображение, которое при наведении курсора исчезает и вызывает появление другого элемента в другом месте на стр. Но это заставляет мой браузер вести себя непредсказуемо. Иногда это не влияет на зависание, иногда задерживает эффект, или эффект достигается только дополнительным движением мыши и т. Д.
<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>
Пытаясь понять, что происходит, путем упрощения и т. Д. (Замена идентификаторов на CLASSES и т. Д. Не дала никакого эффекта), я наконец заменил div с красным фоном вместо изображения Deviant Art. Поведение стало еще более безумным:
<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>
В моем браузере (FF) это создает красный квадрат на LHS примерно на 82 пикселя вниз по странице. 1. Наведение указателя мыши приводит к одному из трех вариантов поведения: а) оно исчезает; б) оно исчезает, а затем снова появляется; в) текст "LOCATZ!!!!" отображается под ним. 2. По-разному нажимая или паря над красным квадратом или в позиции (невидимого) красного квадрата, а затем перемещая курсор в верхний левый угол страницы, иногда исчезает красный квадрат, в левом верхнем углу появляется красный квадрат угол и зеленый прямоугольник в 100px сверху и 300px слева. Эти результаты кажутся непредсказуемыми / ошибочными.
Что не так с кодом и почему он так запутывает браузер?!? Я изо всех сил пытаюсь даже получить повторяемое поведение.
ОБНОВЛЕНИЕ Спасибо, Джозеф Марикл, приятно знать, но я пытаюсь узнать о hover а также visibility функциональность, а не реализовывать код из Fiddle. Я возился с кодом, чтобы попытаться сделать это, но не вижу, что с ним не так.