Hey I have some styling to do but I'm not sure how to do it using regular css without js.
My html is like this:
<div class="book">
<span class="title">Snow Crash</span>
<span class="author">Neal Stephenson</span>
</div>
And my css is like this:
div.book span.title { color: black; }
div.book span.author { color: gray; }
div.book:hover { color: orange; }
I want both the author and title to be orange whenever the div is hovered over, even though I have set them to be different colors normally. The spans won't inherit the color property from the div since they have their own colors set, and the hover of the spans won't activate unless you hover over the spans themselves. Can I do this without using javascript?
div.book span.title { color: black; }
div.book span.author { color: gray; }
div.book:hover, div.book:hover span.title, div.book:hover span.author
{
color: orange;
}
The rule div.book:hover will not override div.book span.title and div.book span.author because the latter rules are more specific than the former. You will need to do either:
div.book span.title { color: black; }
div.book span.author { color: gray; }
div.book span.author:hover, div.book span.title:hover { color: orange; }
or:
div.book span.title { color: black; }
div.book span.author { color: gray; }
div.book:hover { color: orange !important; }
I generally recommend against the use of !important unless it's absolutely necessary.
Additionally, I'd admonish that this is CSS3 and is only implemented in modern browser versions.
EDIT:
This is a third alternative:
div.book:hover span.title, div.book:hover span.author { color: orange; }
Related
If I have the following HTML with a custom CSS class:
.custom_list_item {
color: black;
}
.custom_list_item:hover {
color: red;
}
<div class="custom_list_item">Test</div>
This makes it so when I hover over the entire box, it makes the text red. Is there a way to make sure this only happens when I hover over just the text itself?
Wrap it in a span. A p would stretch over the full width of div.
.custom_list_item {
color: black;
}
.custom_list_item span:hover{
color: red;
}
<div class="custom_list_item"><span>Test</span></div>
Wrap it in span then style span:
.custom_list_item {
color: black;
}
.custom_list_item span:hover {
color: red;
}
<div class="custom_list_item">
<span>Test</span>
</div>
Change that div's display property from block to inline-block. No extra elements like spans necessary.
.custom_list_item {
color: black;
display:inline-block;
}
.custom_list_item:hover {
color: red;
}
<div class="custom_list_item">Test</div>
Divs are block level elements by default and will take up the full width of their parent element.
You can wrap a span for your div and set span:hover
.custom_list_item {
color: black;
}
span:hover{
color: red;
}
div{
border: 3px solid red;
}
<div class="custom_list_item"><span>Test</span></div>
I am using WordPress so I wrote the custom color to change the background color of the box on hover but it's not working
#project1 {
height: 100px;
width: 33.33%;
background-color: red !important;
}
#project1:hover {
background-color: blue;
color: white;
}
<div id="project1"></div>
The !important rule is not being overwritten by a new rule that does not have !important.
Either remove !important from the first declaration, or if you absolutely have to keep it there, add it also to the :hover declaration.
#project1 {
height: 100px;
width: 33.33%;
background-color: red !important;
}
#project1:hover {
background-color: blue !important;
color: white;
}
<div id="project1"></div>
Try Removing !important from first rule
#project1{
background-color: red;
}
#project1:hover {
background-color: blue;
color: white;
}
Also, tend to avoid putting !important, rather do the override with better combination of parent selectors.
So guys I want to set a color of H2 inside of a divID:hover in css.
Is there a way to do this?
Btw I don't want to use Javascript for this.
#moto:hover {
cursor: pointer;
border-color: green;
color: green;
}
This will apply to an h2 element any where inside the div on hover.
#divId:hover h2 {
style
}
Using the child combinator will apply only to direct children.
#divId:hover > h2 {
style
}
I have added some colors, you can manage as you need.
#moto {
border-color: blue;
color: black;
height:30px;
background-color:gray;
}
#moto:hover {
cursor: pointer;
border-color: green;
color: green;
height:30px;
background-color:red;
}
<h2 id="moto">heading</h2>
The selector should be
#moto:hover h2 { ... }
I have following CSS selectors that highlight the selected entry in a lookup list either using up and down keys or mouse pointer. Issue is when using both keyboard and mouse, multiple entries are getting highlighted. Following here is the CSS entries.
&:hover, &.selected {
background: #205081;
label {
.title {
color: #fff;
}
.subTitle {
color: #ccc
}
}
}
.selected CSS class is dynamically set based on up and down key events.Any suggestions on fixing this issue would be much appreciated. Thanks
Well, sibling selector is always tricky.
Given that your styles are applying to ul, li, you can take :hover prior to .selected using trick with parent's :hover like this:
#mixin high-light()
{
background: #205081;
label {
.title {
color: #fff;
}
.subTitle {
color: #ccc
}
}
}
#mixin unhigh-light(){
background: #fff;
label {
.title {
color: #000;
}
.subTitle {
color: #000
}
}
}
ul{
&:hover{
li{
&.selected{
#include unhigh-light();
}
}
}
li{
&:hover, &.selected, &.selected:hover {
#include high-light();
}
}
}
This is a sample of html markups:
<ul>
<li><label><span class="title">Item</span></label></li>
<li class="selected">
<label><span class="title">Item</span></label>
</li>
<li><label><span class="title">Item</span></label></li>
</ul>
I am working on my exam with html/css, and I have a question - we're supposed to make a website for fonts, and I want to have a index page where I want to have one of the fonts showcased like this
R/r
Roboto
And the font is colored in white, while the seperator is colored in a blue color, however I want the seperator to turn to white, while the rest of the text turns to blue.
For now I have this:
a:hover {
color: #00ebff;
transition:
}
<a href="roboto.html">
<h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>
And I cant for the life of me figure out how to do it.
You're along the right line, but you need to be more specific in the selector for the separator element. The following CSS should achieve what you need:
a:hover {
color: #00ebff;
}
a:hover span.spacer {
color: #fff !important;
}
Please note that using the !important rule here is essential, since you're using inline styles. However, it would be much better to define the style for .spacer in your CSS file too:
a .spacer {
color: #00ebff
}
a:hover {
color: #00ebff;
}
a:hover .spacer {
color: #fff;
}
<a href="roboto.html">
<h1>R<span class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>
.spacer{
color: #00ebff;
}
a:hover {
color: #00ebff;
}
a:hover h1 .spacer{
color: white;
}
a:hover {
color: #00ebff !important;
}
a:hover span.spacer {
color: #fff !important;
}
<a href="roboto.html">
<h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>
Use this code
.spacer{
color: #fff;
}
a:hover {
color: #00ebff;
}
a:hover .spacer{
color: white !important;
}