HTML/ CSS изображение при наведении курсора мыши скрывает

#html #css #hover #image

#HTML #css #наведите #изображение

Вопрос:

У меня есть 2 изображения, на 1 показано слово «home», а на другом показано «home» с несколькими стрелками, указывающими на него сверху.. в основном, небольшая вещь, чтобы оживить мой веб-сайт, над которым я работаю в рамках своих исследований.

Каков был бы самый простой способ перехода от пустого изображения к изображению стрелки? без использования модного JavaScript? мне не нравится javascript, и я бы предпочел его не использовать.

Мой HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>This is my website :D</title>
</head>
<body>
    <div id="banner"><img id="logo" src="images/logo.png" />
        <div id="menucontainer">
            <div class="menulink" id="menu1"><a href="index.html"><img border="0" id="arrow1" src="images/arrow1blank.png" /><img border="0" id="arrow1popup" src="images/arrow1.png"  /></a></div>
            <div class="menulink" id="menu2"><a href="#">About Us</a></div>
            <div class="menulink" id="menu3"><a href="#">Services</a></div>
            <div class="menulink" id="menu4"><a href="#">Account</a></div>
        </div>
    </div>
</body>
</html>

и CSS:

 #banner {
    background-color:#000000;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    right:0;
}
#logo {
    position:absolute;
    left:350px;
}
#menucontainer {
    position:relative;
    left:750px;
    top:0px;
    right:350px;
    height:100px;
}
#menu1 {
    float:left;
    text-align:center;
    width:120px;
    height:100px;
}
#menu2 {
    float:left;
    width:120px;
    text-align:center;
    height:100px;
}
#menu3 {
    float:left;
    text-align:center;
    width:120px;
    height:100px;
}
#menu4 {
    float:left;
    width:120px;
    text-align:center;
    height:100px;
}

Заранее спасибо, ребята 🙂

Ответ №1:

Есть много способов сделать это, но sprites css — лучший. Уменьшает количество запросов, не требует перезагрузки изображения при наведении курсора, поэтому при медленных соединениях вы не получите эту 1-секундную черную область во время загрузки перевернутого изображения.

Это популярная концепция, вы найдете множество руководств по ней, подобных этому.

Все дело в изображении 🙂

1. Согласен. Вы можете использовать такие ресурсы, как spritegen.website-performance.org которые генерируют изображения css-код для вас.

2. я бы предпочел не генерировать код, поскольку это обман -.-

3. jsfiddle.net/DCrrm/4 .. надеюсь, вы не слишком обидитесь: для этого я использовал 2 генератора cooltext.com для изображений и spritegen.website-performance.org чтобы сгенерировать спрайт .. css полностью создан человеком .. я думаю 🙂

4. @Gobble45: Код CSS в спрайтовых меню очень прост. Изображение спрайта по существу имеет 2 или 3 версии пункта меню (по умолчанию, при наведении, активный), а код CSS добавляет необходимые псевдоклассы, необходимые для отображения различных частей изображения.

Ответ №2:

Просто добавьте этот фрагмент, который будет работать.

 .menulink:hover { background-img:url('images/arrow1blank.png'); }
.menulink:hover a { display:none; }

1. Я пробовал это, но это не скрывает исходные изображения… что мне использовать, чтобы скрыть их для начала? поэтому у меня нет 2 изображений, занимающих место..

2. Затем вам нужно также отобразить: нет исходного изображения при наведении курсора

Ответ №3:

Попробуйте это:

 .menulink       img#arrow1popup { display: none;   }
.menulink:hover img#arrow1popup { display: inline; }
.menulink:hover img#arrow1      { display: none;   }