Странные сбои на css наведите указатель мыши на ссылку

Я пытаюсь создать меню навигации, в котором изображение после ссылки в HTML (или до того, как ссылка, как видно, потому что я меняю порядок), изменяется. Вот мой код:Странные сбои на css наведите указатель мыши на ссылку

<div class="submenu"> 
    <a href="cat4.php" class="text" id="cat4">Category 4</a> 
    <a href="cat4.php"><img src="image/submenu/cat4_transp.png" id="cat4" /></a> 
    <a href="cat3.php" class="text" id="cat3">Category 3</a> 
    <a href="cat3.php"><img src="image/submenu/cat3_transp.png" id="cat3" /></a> 
    <a href="cat2.php" class="text" id="cat2">Category 2</a> 
    <a href="cat2.php"><img src="image/submenu/cat2_transp.png" id="cat2" /></a> 
    <a href="cat1.php" class="text" id="cat1">Category 1</a> 
    <a href="cat1.php"><img src="image/submenu/cat1_transp.png" id="cat1" /></a> 
</div>

А вот CSS:

div.submenu { 
    width: 100%; 
    direction: rtl; 
    unicode-bidi: isolate; 
    text-align: center; 
    border-bottom: 3.5px solid #AB0809; 
    font: 20px verdana; 
} 
div.submenu a { color: black; display: inline-block; } 
div.submenu a.text { padding: 10px; padding-bottom: 2px; position: relative; bottom: 10px; } 
img#cat1:hover, a#cat1:hover ~ a img#cat1 { content:url("../image/submenu/cat1_painted.png"); } 
img#cat2:hover, a#cat2:hover ~ a img#cat2 { content:url("../image/submenu/cat2_painted.png"); } 
img#cat3:hover, a#cat3:hover ~ a img#cat3 { content:url("../image/submenu/cat3_painted.png"); } 
img#cat4:hover, a#cat4:hover ~ a img#cat4 { content:url("../image/submenu/cat4_painted.png"); }

Изображения в вопросе не большие - 30х40 точек и около 3KB каждый. Вот несколько глюков я испытываю в видео формате:

Glitch 1

Glitch 2

Первое происходит, когда я запускаю сайт на локальном хосте/XAMPP (вы можете увидеть глюк происходит с третьей картинкой , он как бы перемещает всю строку), а второй происходит, когда я загружаю сайт на бесплатный хостинг (изображение исчезает на секунду).

Я полностью озадачен и надеюсь, что вы можете мне помочь. Я использую последнюю версию Chrome/Windows 7 x64.

источник

2016-02-17 K. Golov

Вы пытались явно указать размер img? Кажется, что браузер удаляет одно изображение, а затем вставляет другое, что изменяет поток контента. Если явно, что данный элемент является заданной шириной, он должен смягчить это. – denmch

Я нашел решение обеих проблем, и я размещаю его здесь для тех, кому это нужно.

Почти все глюки, за исключение того, где изображение исчезает на секунду, ушел после того, как я заменил <IMG> тегов с < Див > тегами, к которому я установить фон с помощью CSS. Это также дало мне более широкую поддержку браузера (включая Firefox).

Проблема с исчезающим изображением я решил путем предварительной загрузки необходимых изображений (я установил фиктивный div в верхней части страницы и поместил все изображения в качестве фона). Таким образом, нужные изображения уже были загружены и не нуждались в загрузке снова, следовательно, это была задержка.

источник

2016-02-17 23:59:04

Странные сбои на css наведите указатель мыши на ссылку

ответ

Смежные вопросы