Html CSS a:悬停内联?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16777474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:47:53  来源:igfitidea点击:

CSS a:hover inline?

htmlcsshover

提问by Rudi Kershaw

I have been trying to create a navigation bar for a website I am making, and I want each button to display a difference colour when highlighted. I have used <ul>to create the navigation bar. The question is, is there a way to use the "a:hover {background:#;}" as inline CSS on a specific element?

我一直在尝试为我正在制作的网站创建一个导航栏,我希望每个按钮在突出显示时显示不同的颜色。我曾经<ul>创建过导航栏。问题是,有没有办法在特定元素上使用“a:hover {background:#;}”作为内联 CSS?

I have tried giving each <li>or <a>an id and then creating references to them in the internal style sheet, but can't get it to work. Below is what I have so far;

我曾尝试给每个<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>

Just so your aware, I have been using html and CSS for all of 1 week. So I apologise if this is a stupid question. Thanks.

请注意,我已经使用 html 和 CSS 整整 1 周了。因此,如果这是一个愚蠢的问题,我深表歉意。谢谢。

回答by SLaks

That's completely impossible; sorry.

那是完全不可能的;对不起。

Instead, you can create a CSS class for each color and apply the appropriate class to each link:

相反,您可以为每种颜色创建一个 CSS 类,并将适当的类应用于每个链接:

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

回答by Sourabh

If you use :nth-child(X)pseudo class, you can do this without adding a class to every new liyou add. For this, I had to move the background-colorto liand also added a few other CSS properties, nothing much.

如果您使用:nth-child(X)伪类,则无需向添加的每个新类添加类即可执行此操作li。为此,我不得不移动background-colortoli并添加了一些其他 CSS 属性,没什么。

This will be your CSS for adding color:

这将是用于添加颜色的 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

+ :nth-child

回答by davidcondrey

Inline javascript

内联 JavaScript

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


In a working draft of the CSS2 spec it was declared that you could use pseudo-classes inline like this:

CSS2 规范工作草案中,声明您可以像这样内联使用伪类:

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

but it was never implemented in the release of the spec as far as I know.

但据我所知,它从未在规范的发布中实现。

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

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

回答by Nabil Ghulam

You could achieve this with jquery :)

你可以用 jquery 来实现这一点:)

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