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>
Related
I wanna know how can I use #extend in SASS when I have nested CSS.
Here's my code , I wanna extend all property in a button which is in section to my .last-btn
section {
button {
background - color: rgb(111, 190, 190);
border: none;
padding: 2e m;
border - radius: 10e m; &
: hover {
background: rebeccapurple;
} &
::after {
content: "Hello";
}
}
}
.last - btn {
}
you can try with:
.last - btn {
#extend section>button;
}
but I haven't tested it.
Or you can make a mixin.
Can you please check the below code? Hope it will work for you.
section {
button{
background-color:rgb(111, 190, 190);
border: none;
padding: 2em;
border-radius: 10em;
&:hover{
background: rebeccapurple;
}
&::after{
content: "Hello";
}
}
.last-btn{
#extend button;
}
}
Please refer to this link: https://jsfiddle.net/yudizsolutions/sqv391w8/3/
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 am working on a website where I want to change the color of the whole navigation bar when I hover over a link that is a child or descendants of that navigation bar.
.containernav {
margin: 0;
padding: 0;
background-color: grey;
}
/*home*/
#home {
color: white;
}
#home:hover {
background-color: white;
}
/*playstation*/
#playstation {
color: white;
}
#playstation:hover{
background-color: blue;
}
/*xbox*/
#xbox {
color: white;
}
#xbox:hover{
background-color: green;
}
/*pcgaming*/
#pcgaming {
color: white;
}
#pcgaming:hover {
background-color: #FFBA00;
}
nav > ul {
list-style: none;
}
nav > ul > li > a {
text-decoration: none;
}
<div class="containernav" id="a">
<nav>
<ul>
<li><a id="home" href="index.html">Home</a></li>
<li><a id="playstation" href="playstation.html">Playstation</a></li>
<li><a id="xbox" href="xbox.html">XBox</a></li>
<li><a id="pcgaming" href="pcgaming.html">PC-Gaming</a></li>
</ul>
</nav>
</div>
My current implementation only changes the color of the link it self, but not the container with the css style class containernav. What need to be changed in order to change the background color of that container?
This is not achievable with css. There are several topics regarding this matter - some of them demands for a :parent selector, some of them saing that this will be a huge performance issue.
However you can do this with javascript if this is an option for you.
Here is a quick example with Jquery:
$("#child").hover(function(){
$(this).parent().css("bakground,"red");
//This should be ajusted according your needs
// Can be achieved with data attribute, custom class etc..
});
JQuery
$( document ).ready(function() {
$("#home").hover(
function() {
$(".containernav").addClass("white-bg");
}, function() {
$(".containernav").removeClass("white-bg");
}
);
$("#playstation").hover(
function() {
$(".containernav").addClass("blue-bg");
}, function() {
$(".containernav").removeClass("blue-bg");
}
);
// and so on..
});
CSS
.white-bg {background-color:white;}
.blue-bg {background-color:blue;}
// and so on
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;
}
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; }