I'd like to ask a question which I can't find an answer for anywhere. I'm sure it's pretty simple, but how do I put these two css sentences (or functions, I don't know?) together in one?
.key:hover p{
color:red;
}
.key:hover {
background-color: #999999;
}
Thanks in advance.
The following is likely what you're after. This solution, like any other, is affected by other applicable CSS definitions that may already exist.
.key:hover {
color:red;
background-color: #999999;
}
You probably want hover function to be triggered only when the mouse is hovered on exactly <p> however this is not possible as you can see in live demo
.key
{
background-color: green;
width: 250px;
height: 250px;
}
.key:hover {
background-color: red;
}
.key:hover p{
background-color: blue;
}
Related
Say I have this custom button:
<div class="button-container">
<p class="button-text">Click me</p>
</div>
I want the div to have a background color, and the text to have a color in SCSS.
But I also need a different background color and text color when I'm hovering the whole div (not just the p tag and div separate, only when hovering the div)
I could write something like this:
div.button-container{
background-color: white;
p{
color: black;
}
&:hover{
background-color: red;
p{
color: blue;
}
}
}
But this does not look like a good idea, since this will become very complex and hard to manage if there are more elements involved. What is the best solution here?
I don't know exactly what the code I want would look like since I'm pretty new to SCSS, but I am thinking it would look something like this: (ignore syntax here, just an idea of how much shorter I would like it to be)
div.button-container{
background-color: white, red;
p{
color: black, blue;
}
}
Based on the html you have provided the following scss will be just fine:
.button-container {
background-color: black;
color: white;
&:hover {
background-color: gray;
color: black;
}
}
If there are several items involved, you can create some mixins that can be reused. For example. if there are several button-container elements that share the same style in the app, I will make something like this:
#mixin btnContainerBlack {
background-color: black;
color: white;
&:hover {
background-color: gray;
color: black;
}
}
In this case, you will simply add the mixin name to the element style:
.button-container {
#include btnContainerBlack;
}
There are many ways to make scss more clean and reusable. This is just one of the ideas.
i am trying to make a website, but for some reason i am stuck on the hover. I knew how to do this, but i thing i forgot something.
What i want is that when i hover over the black bar the black turns into white so you can see the text.
This is my code:
div.spoiler1:hover div.spoiler1 {
background-color: white;
}
<div style='display:inline; background-color: black;' class='spoiler1'>hey</div>
I also tried this css:
spoiler1:hover spoiler1 {
background-color: white;
}
div.spoiler1:hover,.spoiler1 {
background-color: white;
}
spoiler1:hover {
background-color: white;
}
Good efforts. The issue is that the inline style overrides the sheet. In general, don't use inline styles (hard to debug/maintain, not reusable):
div.spoiler1 {
background-color: black;
display: inline;
}
div.spoiler1:hover {
background-color: white;
}
<div class='spoiler1'>hey</div>
See this JSFiddle.
What is the meaning of id^ in
[id^="slide"]:checked+ .slide
This line was there in a CSS code and I am unable to figure out its meaning. Please help me to clear this doubt.
^=, in this case, means "starts with". So this selector will look for anything that has an id starting with "slide", that's checked, and then apply to the .slide directly following it.
Here's the MDN run-down of attribute selectors. Closely related to ^= are *= (matches anywhere in the string) and $= (matches at the end of the string). And here's a demo!
[id*="slide"] {
height: 30px;
display: inline-block;
border: 1px solid black;
padding: 10px;
}
[id^="slide"] {
background: orange;
}
[id$="2"] {
background: skyblue;
}
<div id="slide-1">#slide-1</div>
<div id="slide-2">#slide-2</div>
<div id="not-a-slide">#not-a-slide</div>
Please is possible to set scss for element inside --rounded ? I do not wanna use .box__something, but I need to modify children that is depend on parent modifier
<div class="box">
<div class="box__something">Hello</div>
</div>
<div class="box box--rounded">
<div class="box__something">Hi</div>
</div>
.box {
&__something {
background: blue;
}
&--rounded {
background: green;
.box__something { // <<< Is some better selector?
background: pink;
}
}
}
Sass doesn't have any great built-in solutions to solve your issue, this is a problem that has been explored many times. You can however acheive the result you are after in a slightly un-elegant manner by using the & helper to join the classes that you wish to join. I have included a live example here.
While this does work, you must realise that if you want to style the .box--rounded class directly you must have it inside it's own class as illustrated below, you cannot use it with the trailing & class that we have placed &__something on.
I recommend you play around with my sassmeister gist and see what results you can come up with.
.box {
&__something {
background: blue;
}
&--rounded {
background: green;
}
&--rounded & {
&__something {
background: pink;
}
}
}
I hope this has solved your issue.
The modifier should be used not on the parent, and the child element .box__something
If I understand your problem correctly, I feel your pain! As soon as you nest a nested property & changes to the parent.
You can however cache the original class name as a variable like this:
$box: box;
.#{$box} {
.#{$box}__something {
background: blue;
}
.#{$box}--rounded {
background: green;
.#{$box}__something { // <<< Is some better selector?
background: pink;
}
}
}
The only problem with the method above is that you end up with a larger volume of compiled CSS. This renders to:
.box .box__something {
background: blue;
}
.box .box--rounded {
background: green;
}
.box .box--rounded .box__something {
background: pink;
}
To reduce the size of the output you could combine & with the variable method like so:
.box {
$box: &;
&__something {
background: blue;
}
&--rounded {
background: green;
#{$box}__something {
background: pink;
}
}
}
This renders to:
.box__something {
background: blue;
}
.box--rounded {
background: green;
}
.box--rounded .box__something {
background: pink;
}
That way you can change the class name in the variable and everything gets updated, I also think it reads a bit better.
Sorry if the question is a little vague, I found it quite hard to title. Anyway, I am currently creating a new design and I have hit an issue, I basically want one div to start underneath another, as I am using rounded edges on the div before and want to cover up the whitespace.
I am able to get the div to underlay, however when I set the z-index it becomes the bottom element and the interaction with links etc can't be done. (e.g links can't be clicked, can't highlight text)
To better explain, I have created this JSFiddle link, it shows exactly what I am trying to do. Try clicking the link, it will simply not work.
The code on the JSFiddle is as follows:
#div-1, #div-2 {
width: 350px;
border-radius: 0 0 16px 16px;
}
#div-1 {
background-color: grey;
}
#div-2 {
background-color: black;
position: relative;
z-index: -1;
margin-top:-25px;
}
Any help is appreciated, and if you would like me to clarify anything please do ask.
Thanks,
Jake
Demo http://jsfiddle.net/Amn7S/
Dont use z-index:-1; use z-index:1; and z-index:2; then it works.
#div-1 {
background-color: grey;
z-index:2;
position:relative;
}
#div-2 {
background-color: black;
position: relative;
margin-top:-25px;
z-index:1;
}
instead using z-index-1; you should use positive z-index and tell each div where to stand.
http://jsfiddle.net/wdQWu/3/
#div-1, #div-2 {
width: 350px;
border-radius: 0 0 16px 16px;
position:relative;
z-index:1;
}
#div-1 {
background-color: grey;
}
#div-2 {
background-color: black;
position: relative;
z-index: 0;
margin-top:-26px;
}
oups, little late, answer already there :)
You could change the z-index of the link to be above the 2nd div
something like this maybe ?
http://jsfiddle.net/wdQWu/1/
I've used a div with a class wrapper as you can see in the code.
.wrapper {
width: 350px;
border-radius: 0 0 16px 16px;
background-color: black;
}
Hope it's useful..