CSS a：悬停内联？

我一直在尝试为我制作的网站创建导航栏，并且我希望每个按钮在突出显示时都显示不同的颜色。我用<ul>来创建导航栏。问题是，有没有办法在特定元素上使用“a：hover {background：＃;}”作为内联CSS？CSS a：悬停内联？

我已经尝试给每个<li>或<a>一个ID，然后在内部样式表中创建对它们的引用，但无法让它工作。以下是我到目前为止;

#menu {height:37px;display:block;margin:20px auto;border:1px solid;border-radius:5px;margin-left:30px;max-width:550px} 
#menu ul {margin:0;padding:0;} 
#menu li {float:left;display:block;min-width:110px} 
#menu a {display:block;padding:12px;font:bold 13px/100% Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-shadow:2px 2px 0 rgba(0,0,0, 0.8); background-color:#5A8A41;border-right:1px solid #1b313d; color:#fff;} 
#menu a:hover {background:#5D80B0;} 
... 
<div id='menu'> 
<ul> 
    <li class='active'><a href='#'><span>Home</span></a></li> 
    <li><a href='#'>XML</a></li> 
    <li><a href='#'>SQL</a></li> 
    <li><a href='#'>Java</a></li> 
    <li><a href='#'>C#</a></li> 
</ul> 
</div>

就这么你知道，我一直在使用HTML和CSS所有的一个星期。所以我很抱歉，如果这是一个愚蠢的问题。谢谢。

来源

2013-05-27 Rudi Kershaw

如果是在HTML/CSS新的，我会建议你看看这里的引导：http://twitter.github.io/bootstrap/ –

'#menu一个：{ 后边框颜色：＃6696bd; }'不起作用'a：在'没有大小没有边框宽度后，你试图添加'边框颜色'，这没有意义 – Sourabh

是的，不知道为什么在那里......我想我将它添加为“线索和错误”风格，同时玩耍并从未移除它。可能最好我拿出来。谢谢。 –

这完全不可能;抱歉。

相反，你可以为每个颜色的CSS类，并应用适当的类的各个环节：

#menu a.red:hover { background: red; }

来源

2013-05-27 16:55:38 SLaks

谢谢。这将如何看待本地的HTML？（也就是说，这个类的引用在元素上看起来是什么样子？）对于愚蠢的问题，再次抱歉。 –

@RudiKershaw：'class =“red”' – SLaks

哈哈。好的谢谢。非常感激。 >。< –

你可以使用jQuery :)

$(document).ready(function() { 
    $('a').hover(function(){ 
     $(this).parent().css({background-color: 'yellow'}); 
    }); 
});

来源

2013-05-27 17:04:34

看起来有点过分，特别是对于一个人只在这一个星期。 – BoltClock

哦，没有注意到最后一部分。但仍然是另一种选择，他不必使用它。我知道我不可能在开始时实现jQuery。无论如何，祝你好运。 –

我知道有些情况下使用样式表是不可能的，所以这绝对是一些有用的信息。谢谢。虽然我可能会给JavaScript一段时间的思念。 –

如果使用:nth-child(X)实现这一目标伪类，你可以做到这一点，而不需要添加一个类到你添加的每个新的li。为此，我不得不将background-color移动到li，并且还添加了一些其他CSS属性，没什么。

这将是你添加颜色CSS：

#menu li:nth-child(1):hover { background: red; } 
#menu li:nth-child(2):hover { background: blue; } 
#menu li:nth-child(3):hover { background: purple; } 
#menu li:nth-child(4):hover { background: yellow; } 
#menu li:nth-child(5):hover { background: pink; }

DEMO

+ :nth-child

来源

2013-05-27 17:19:32 Sourabh

联JavaScript

<a href='index.html' onmouseover='this.style.textDecoration="none"' onmouseout='this.style.textDecoration="underline"'>Click Me</a>

在working draft of the CSS2 spe℃下将其宣称可以使用伪类直列这样的：

<a href="http://www.w3.org/Style/CSS" 
    style="{color: blue; background: white} /* a+=0 b+=0 c+=0 */ 
     :visited {color: green}   /* a+=0 b+=1 c+=0 */ 
     :hover {background: yellow}  /* a+=0 b+=1 c+=0 */ 
     :visited:hover {color: purple} /* a+=0 b+=2 c+=0 */ 
    "> 
</a>

，但从未在该规范的发布，据我所知实现。

http://www.w3.org/TR/2002/WD-css-style-attr-20020515#pseudo-rules

来源

2014-10-15 07:14:56 davidcondrey

CSS a：悬停内联？

回答

相关问题