Question

我不能让我的悬停或其他效果正常工作。我的代码的哪一部分不正确？

CSS

#nav a {
    display: block;
    width: 180px;
    height: 150px;
    background-image: url(https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg);
    background-repeat: no-repeat;
}

#nav a {
    background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 0;
}

#nav a:hover {
    background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -39px;
}

#nav a:active {
    background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -83px;
}

HTML

<body>
    <a href="http://www.mcckc.edu"><img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" /></a>
</body>

Answer 1

你的css正在寻找一个名为a的ID中的nav标记，但你的html中没有。将其更改为

<div id="nav"><a href="http://www.mcckc.edu"><img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" /></a></nav>

您也试图更改a的背景，但a内有图片标记。你应该把一切都变成背景图像

Answer 2

您应该删除url与url (...)中左括号之间的空格，如下所示：

#nav a {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 0;}
#nav a:hover {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -39px;}
#nav a:active {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -83px;}

WORKING vs NOT WORKING 。

同样，当您使用#nav a选择器时，您应该拥有id为nav的锚标记的包装器。如果真实标记中没有这样的元素，请从CSS选择器中删除#nav。

Answer 3

在CSS中，您正在访问ID为“nav”的另一个元素中的元素...但在HTML中，没有#nav元素。你有两个选择，第一个是：

更改CSS以删除a之前的所有#nav。

将您的HTML更改为以下内容：

<div id="nav">
     <a href="http://www.mcckc.edu"><img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" /></a>
</div>

另外，正如Hashem Qolami所说，你应该删除“url”和你的开头括号之间的空格。另请注意，请确保括号内的网址也在引号内。

Answer 4

所以这就是我最简单的方式

<强> http://jsfiddle.net/7wh9z/

根据需要添加图片路径 - 我使用颜色作为示例，如果需要，可以将它们取出。

<a href="#Link"></a>

a {background: url('') #ff0000; width:150px; height:45px; display: block}
a:hover {background: url('') #00ff00;}
a:active {background: url('') #0000ff;}

你在那里有一个图像的事实已经意味着你的IMG标签中的任何内容都会显示在背景之上 - 这样就会阻止你看到背景和悬停效果，所以你最好把它拿出去。

请记住提供您的链接类或ID，因为我给您的链接类或ID将影响所有标签。

让悬停和其他效果起作用

4 个答案: