HTML / CSS图像导航菜单

Question

所以，我已经编程了几年了，因为创建HTML和CSS并不是编程语言，所以我一直很害怕制作一个网站，并且由于某种原因，它们使我困惑不已！

这是我的jsfiddle的链接，其中有HTML和CSS代码，尽管我会显示图像，但悬停时会显示其他图像。 我记得几年前在CS入门课程中做了此操作。

在查看了多个有关如何简单地执行此操作的示例之后，在示例代码具有自己的图像的情况下复制代码并实现我的图像，并且仍然出现空白屏幕，接下来我要向大家展示给我看那些我很想念

预先对不起，这很简单！

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);
}

我的目录树：

[SITE]-
    |—index.html
    |
    |—[ css ]
    |   |—base.css
    |   
    |—[ images ]
    |   |—about.png
    |   |—aboutHover.png
    |   |—contact.png
    |   |—contactHover.png
    |   |—name.png
    |   |—nameHover.png
    |   |—work.png
    |   |—workHover.png
    |
[SITE]-

Answer 1

如果索引文件的相对路径在同一级别，则/images应该是images 。

background-image: url(images/workHover.png);

dir/index.html = ../images进入一个目录并进入图像

dir/dir/index.html = ../../images两个目录，然后下移成图像

Answer 2

尝试这个

<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>

HTML / CSS图像导航菜单

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-08-18 16:20:48

解决方案2
0 2014-08-18 16:23:28

HTML / CSS图像导航菜单

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-08-18 16:20:48

解决方案2 0 2014-08-18 16:23:28

解决方案1
0 已采纳 2014-08-18 16:20:48

解决方案2
0 2014-08-18 16:23:28