Like the title says, how do I go about adding hover to my #extended styles?
I will add a link to my Codepen here: https://codepen.io/UserBrayann/pen/gOvmzwN
SCSS
%box-shared {
box-shadow: 4px 3px 19px 0px rgba(0,0,0,0.3);
border-radius: 5px;
padding: 10px;
}
Here is how to use the hover in the scss while also using #extend.
%box-shared {
box-shadow: 4px 3px 19px 0px rgba(0,0,0,0.3);
border-radius: 5px;
padding: 10px;
&:hover {
background-color: red;
}
}
Related
This is the top part:
button {
background-color: gray;
color: #fff;
border: none;
border-radius: 3px;
padding: 3px 10px;
cursor: pointer;
min-width: 1%;
min-height: 30px;
margin: 1px 0;
font-size: 16;
font-weight: bold;
box-shadow: 4px 4px 2px 0px #333333;
}
.blue-btn {
background-color: #337AB7;
}
.green-btn {
background-color: #008000;
}
.red-btn {
background-color: #FF0000;
}
Here comes my problem…..
.button:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
This one only work if the class is button (it does not work for blue/green/red buttons)
So I tried this instead
.button:hover, blue-btn:hover, green-btn:hover, red-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
Still only works for button class
So I tried this one
.blue-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
.green-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
.red-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
That worked – but it seem to me its a bit stupid to write the same bit again and again and again……
Anyone got a tip?
Use button:hover instead of .button:hover .
First off, you're confusing element names with classes. A button is an actual element (<button></button>) and .button is a class you've created.
I don't know if what you have is a button with the class of button because you didn't post any HTML but know that isn't good practice, it's redundant and confusing.
Give all the elements that you want to have a hover effect an encompassing class like .hover and the specific class of .blue or .red as applicable to the color you want.
.hover {
background: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
.blue {
background: #337AB7;
}
.green {
background: #008000;
}
.red {
background: #FF0000;
}
I'm trying to set a fill color of #333 for the arrow on webshim's HTML5 form validation bubble, but I can't seem to identify the correct class.
My CSS so far:
.ws-po-box {
padding: 10px;
/* border: 1px solid red; */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #333;
-webkit-box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #fff;
letter-spacing: 0.1pt;
}
.ws-po-arrow {
/* border-bottom: .61538em solid red; */
}
Fiddle: http://jsfiddle.net/zhwdbhdd/.
Any help would be appreciated!
Looks like arrow CSS is contained in ws-po-arrowbox class.
<div class="ws-po-arrow">
<div class="ws-po-arrowbox"></div>
</div>
Arrows color is not a background-color, but a border color, since the arrow is made with borders. So add this CSS
.ws-po-arrowbox{
border-bottom-color:red!important;
}
I updated your fiddle to demonstrate:
http://jsfiddle.net/zhwdbhdd/1/
I am currently designing a theme but my CSS styles are not being applied throughout the entire site.
It was suggested that my CSS lacks specificity, but the issue isn't that I can't override the default styles; the issue is that it's not using my custom style sheet. That can be proven because my styles work on certain pages.
I'm not sure what's causing the problem or how to fix it.
#Head {
background: #D6AD33;
padding: 0px;
}
/*Panels/Sidebars*/
.Box {
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
background: #FFA366;
color: #888;
padding: 6px 10px;
margin: 0 0 10px;
box-shadow: 0px 0px 2px #999;
-moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
}
.Box h4 {
font-size: 110%;
color: #FF6600;
font-weight: bold;
margin: 0;
padding: 0 0 1px;
}
I'm using this free template for a study project: jsFiddle
My problem appears when I'm using IE7, because the botton margin of the DIV with id="outerwrapper" totally disappear.
Here you can find the css code for the outerwrapper:
div#outerwrapper {
margin: 20px auto;
width: 960px;
margin-bottom: 20px;
background-color: #CEC7AA;
-moz-box-shadow: 0 0 3px 3px #333;
-webkit-box-shadow: 0 0 3px 3px #333;
box-shadow: 0 0 3px 3px #333;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
Any suggestions?
A margin needs something to "bounce" on. It can't "bounce" against the body. So instead of using a margin-bottom to the child, rather use a padding-bottom to the parent:
body {
padding-bottom: 50px;
}
Border-radius and box-shadow are not working in IE7. I'm using the PIE.htc file. The path is correct, I checked it. Don't know where it's going wrong. I used it before too and it was working then.
Don't know the reason this time.
.box-shadow-outer {
float: left; font-size: 40px;
border: 2px solid #c4c4c4;
padding: 80px 0;
text-align: center;
width: 500px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
-webkit-box-shadow: #666 0px 0px 10px;
-moz-box-shadow: #666 0px 0px 10px;
box-shadow: #666 0px 0px 10px;
background: #e4e4e4;
behavior: url(../../Content/Css/PIE.htc);
}
float: left; is creating problems.
You can solve it by 2 ways:
Remove float: left;
add this style:
position:relative;
z-index:1;