Question

这是我的网站。 http://www.gtaresources.net/

css使锚元素具有某些css属性，我只想像导航栏一样。只需登录按钮，当我添加菜单。但是现在你可以在右上方的图像后面看到绿色。它不应该落后于每个锚点，我只想要它用于某些锚点，我不能或不知道如何仅使用a：visit和a的菜单进行内联css：悬停和东西。解决方案是什么？我只需要让一些css仅适用于某些元素或元素。

我记录了干扰的css开始和结束的位置。

这是我的来源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html>
<head>
<title>GTA Resources</title>
<style type="text/css">
html
{
background-color: #003300;
padding-right: 11%;
padding-left: 11%;
}
body
{
background-color: black;
}
#p
{
color: white;
}
#para
{
color: white;
padding-right: 2%;
padding-left: 2%;
}
a
{
color: #003300;
}
.logo
{
padding-top: 4px;
padding-left: 4px;
}

ul {                  <!-- Css that is interferring begins -->
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;


a:hover, a:active {
background-color: #7A991A;
}                         <!-- Css that is interferring ends -->
</style>
<script type = "text/javascript">

function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;

var unArray = ["admin"];
var pwArray = ["password"];

for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}

if (valid) {
alert ("Logged In.");
window.location = "/victoria/logged_in.html";
return false;
}

}

</script>
</head>
<body>

<ul background="/victoria/cutiepie2.jpg" hidden>
<li><a href="/scripts/call.php" id="blue">Call</a></li>
<li><a href="/scripts/text.html" id="blue">Text</a></li>
<li><a href="/menu/home.html" id="blue">Home</a></li>
<li><a href="/menu/news.html" id="blue">News</a></li>
<li><a href="/menu/media.html" id="blue">Media</a></li>
<li><a href="/menu/downloads.html" id="blue">Downloads</a></li>
<li><a href="/menu/forum.html" id="blue">Forum</a></li>
</ul>

<a href="/index.html"><img src="/victoria/logo.jpg" width="250" height="75" class="logo"></a>

<ul style="list-style-type: none;margin: 0;padding: 0;overflow: hidden;position: absolute;top: 4px;right: 4px;">
<li style="float: left;"><a style="display: block;width: 120px;font-weight: bold;color: #FFFFFF;background-color: black;text-align: center;padding: 4px;text-        decoration: none;text-transform: uppercase;" href="/victoria/logged_in.html">Log in</a></li>
</ul>

<form name = "myform" style="position: absolute; top: 0;right: 0;" hidden>

<p id="p">Username: <input type="text" name="username">

Password: <input type="password" name="pword">

<input type="button" value="log in" onclick= "validate()"></p>

</form>

<center><h1 style="color: #003300;">GTA Resources</h1></center>

<center><img src="http://i1-news.softpedia-static.com/images/news2/Call-of-Duty-Ghosts-Publisher-Wants-to-Break-GTA-5-Sales-Record-Soon-392209-2.jpg" 

width="1000" height="500"></center>

<br><br>

<p id="para">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Welcome to Gta Resources. This is a site all about gta, the cheats, mods, and videos of within it.  From hiliarous videos to
videos of how to make, convert, and import mods into gta. This site has everything. Right now it focuses on Gta 5 but in the future it will have topics on all 
the other Gta's too. This site will have media on the Mods for example, details in a description, videos on and how to do them, and download links, unless 
there is no link. Then I will try my best to give information on it, and where you might be able to get it. There will be a forum soon for discussing topics 
on anything Gta related. And just have a good time. Enjoi!!:)
</p>

<center><a href="/victoria/click_here_for_help.html">Click here for help</a></center>

<p id="p" style="text-align: right;">GTA Resources(c) 2014</p>

</body>
<!--MTD(c) 2014-->
</html>

Answer 1

执行此操作的clean方法是使用CSS类。在HTML中，将类添加到应具有绿色背景的css元素。

HTML：

<a href="#" class="green-on-hover">my link</a>

CSS：

a.green-on-hover:hover {
    background-color : green;
}

注意：类名，就像变量名可以是任何东西，甚至在类名中也允许使用'连字符'。我给了'绿色悬停'你可以称之为你想要的任何东西。找到这个非常简单的教程来帮助你完成课程： http://www.tizag.com/cssT/class.php

希望有所帮助。如果您有疑问，请告诉我。

一个建议：尝试提出你的问题，下次更通用。

Answer 2

你用绿色背景锚，你把图像放在里面，你就会看到你的结果。

试试这个

html:
<a href="/index.html">
  <img width="250" height="75" class="logo" src="/victoria/logo.jpg">
  <span></span>
</a>

的CSS：

a,a:link, a:visited {
    color: #ffffff;
    position:relative;
    display: block;
    font-weight: bold;
    padding: 4px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 120px;
}
a span{
  position:absolute;
  width:100%;
  height:100%;
  background-color:#98bf21;
  z-index:2;
  left:0;
  top:0;
}
a img{
 position:relative;
 z-index:0;
}

我遇到了麻烦，因为它干扰了我不想要它的元素

2 个答案: