HTML/CSS image navigation menu
Question
So, I've been programming for a few years now and have been dreading making a website because HTML and CSS are not programming languages, and for some reason they confuse me to no end!
Here is a link to my jsfiddle where I have the HTML and CSS code that I though would show an image and, on hover, would display a different image. I remember doing this in the introductory course to CS years ago.
After looking at multiple examples of how to do this simply, copying code and implementing my images where the example code had their own images, and still coming up with a blank screen, I'm coming to you guys to show me the idiotic thing that I am miss.
Sorry in advance for how elementary this is!
HTML:
<body>
<a href="#" class="about" title="Learn more about me!"></a>
<a href="#" class="work" title="Look at what I made!"></a>
<a href="#" class="contact" title="Talk to me!"></a>
</body>
CSS:
.about {
width:400px;
height: 200px;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-image: url(/images/about.png);
}
.about:hover {
background-size: contain;
background-repeat: no-repeat;
background-image: url(/images/aboutHover.png);
}
.work {
width:400px;
height: 200px;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-image: url(/images/work.png);
}
.work:hover {
background-size: contain;
background-repeat: no-repeat;
background-image: url(/images/workHover.png);
}
.contact {
width:400px;
height: 200px;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-image: url(/images/contact.png);
}
.contact:hover {
background-size: contain;
background-repeat: no-repeat;
background-image: url(/images/contactHover.png);
}
My dir tree:
[SITE]-
|—index.html
|
|—[ css ]
| |—base.css
|
|—[ images ]
| |—about.png
| |—aboutHover.png
| |—contact.png
| |—contactHover.png
| |—name.png
| |—nameHover.png
| |—work.png
| |—workHover.png
|
[SITE]-
2 answers
solution1
0 ACCPTED 2014-08-18 16:20:48
/images should be images if the relative path of your index file is on the same level.
background-image: url(images/workHover.png);
dir/index.html = ../images to go up one directory and down into images
dir/dir/index.html = ../../images to go up two directoris and down into images
solution2
0 2014-08-18 16:23:28
Try this
<body>
<a href="#" class="about" >Learn more about me!</a>
<a href="#" class="work" >Look at what I made!</a>
<a href="#" class="contact">Talk to me!</a>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.