HTML / CSS мышь при наведении изображения скрывает - PullRequest
Новая
       17

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

1 голос
/ 07 октября 2011

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

Какой самый простой способ перехода от пустого изображения к изображению стрелки?без использования причудливого 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;
}

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

Ответы [ 3 ]

2 голосов
/ 07 октября 2011

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

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

Это все об изображении:)

0 голосов
/ 07 октября 2011

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

.menulink       img#arrow1popup { display: none;   }
.menulink:hover img#arrow1popup { display: inline; }
.menulink:hover img#arrow1      { display: none;   }
0 голосов
/ 07 октября 2011

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

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