How to write a:hover in inline CSS?

后端未结

关注

 23  2548

孤城傲影

I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor.

How can I use a:hover in inline CSS inside the HTML st

相关标签:

23条回答

悲哀的现实

2020-11-21 23:43
I'm extremely late contributing to this, however I was sad to see no one suggested this, if you actually require inline code, this is possible to do. I needed it for some hover buttons, the method is this:
```
.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}
```
```
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a
```
In this case, the inline code: "background-color: red;" is the switch colour on hover, put the colour you need into there and then this solution works. I realise this may not be the perfect solution in terms of compatibility however this works if it is absolutely needed.
0 讨论(0)
发布评论:

提交评论
- 加载中...

无人共我

2020-11-21 23:43

This is the best code example:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>

Moderator Suggestion: Keep your separation of concerns.

HTML

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}

0 讨论(0)

长情又很酷

2020-11-21 23:44

using Javascript:

a) Adding inline style

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) or a bit harder method - adding "mouseover"

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

Note: multi-word styles (i.e.font-size) in Javascript are written together:

element.style.fontSize="12px"

0 讨论(0)

孤独总比滥情好

2020-11-21 23:44
Inline pseudoclass declarations aren't supported in the current iteration of CSS (though, from what I understand, it may come in a future version).

For now, your best bet is probably to just define a style block directly above the link you want to style:
```
<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
故里飘歌

2020-11-21 23:44
As pointed out, you cannot set arbitrary inline styles for hover, but you can change the style of the hover cursor in CSS using the following in the appropriate tag:
```
style="cursor: pointer;"
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
北荒

2020-11-21 23:45
You can't do exactly what you're describing, since a:hover is part of the selector, not the CSS rules. A stylesheet has two components:
```
selector {rules}
```
Inline styles only have rules; the selector is implicit to be the current element.

The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.

However, you can get close, because a style set can technically go almost anywhere:
```
<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...