gpt4 book ai didi

CSS:背景图像不适用于悬停按钮

转载 作者:太空宇宙 更新时间:2023-11-04 00:26:46 24 4
gpt4 key购买 nike

我只是想作为悬停从上到下传递,但是当鼠标在顶部时按钮没有反应。

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" href="style/menuStyle.css" type="text/css" charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<ul id="menu">
<li><a href="http://google.com">Home</a></li>
<li><a href="http://google.com">About</a></li>
<li><a href="http://google.com">Info</a></li>
<li><a href="http://google.com">Gallery</a></li>
<li><a href="http://google.com">Forum</a></li>
<li><a href="http://google.com">Blog</a></li>
</ul>

</body>
</html>

CSS:

a {color:black; text-decoration: none; outline:none; float:left}
a:visited {color: black}
ul {list-style:none}

#menu a {display:block;
width:100px;
height:50px;
background: url(../img/boton.png) top;
text-align:center;
line-height: 50px;
display:inline}

#menu a:hover{ color:red;
background:url(../img/boton.png) bottom}

下载元素: http://gabrielmeono.com/menu.zip

最佳答案

您需要对 CSS 进行一些调整。

删除 // 注释。这些不起作用并破坏了 CSS。如果您需要使用注释,请使用 /* your comment here */

您需要设置background-position 以及background-repeat。通过设置 -' 背景位置,您可以将背景图像向上移动,从而使您的图像成为焦点。为了安全起见,还设置了no-repeat

您可以在以下位置阅读有关此技术的更多信息:http://css-tricks.com/158-css-sprites/

所以这是我想出的最终 CSS:

#menu a
{
display:block;
width:100px;
height:50px;
background-image: url(../img/boton.png);
background-repeat: no-repeat;
text-align:center;
line-height: 50px;
display:inline;
}

#menu a:hover, #menu a :active
{
color:red;
background-position: 0px -50px;
}

关于CSS:背景图像不适用于悬停按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6421001/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com