DEMO
As you can see in my jsbin the background overlays the text in my three link objects (move your cursor above it to see it).
I have tried around with the z-index (as suggested by a friend), however that doesn't seem to have any effect.
How would you go about fixing it?
Here's the relevant CSS:
a {
color: #CCCCCC;
}
a:hover {
background-color: #CCCCCC;
}
As you can see, The font color and background color are the same on hover. The z-index has nothing to do with it. Change the color on :hover and you will see the text, as demonstrated on this fiddle: http://jsfiddle.net/yVdvx/
Change this CSS code.
From:
a {
z-index: 10000;
text-decoration: none;
border-bottom: 1px dotted #666666;
color: #CCCCCC;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
a:hover {
background-color: #CCCCCC;
opacity: .9;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
To (my example makes a:hover color blue):
a {
z-index: 10000;
text-decoration: none;
border-bottom: 1px dotted #666666;
color: #CCCCCC;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
a:hover {
background-color: blue;
color: #393434;
opacity: .9;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
Besides, it may be good to include CSS code in a separate file and load it in the HTML file.
Related
I want to target properties of two divs through css when :hover over one div.
#down-icn {
position: absolute;
bottom: 0; right: 25px;
color: #fff;
-webkit-transition: color 0.25s ease; border-color 0.5s ease;
-moz-transition: color 0.25s ease; border-color 0.5s ease;
-ms-transition: color 0.25s ease; border-color 0.5s ease;
-o-transition: color 0.25s ease; border-color 0.5s ease;
transition: color 0.25s ease; border-color 0.5s ease;
}
#down-icn:hover {
color: #ef5c30;
border-color: #ef5c30;
}
.icn {
border: 2px solid #fff;
border-radius: 50%;
padding: 10px;
margin-left: 10px;
}
!!! .icn:hover {
border: 2px solid #000;
color: #000;
}
when hovered on #down-icn I want to change the properties of both #down-icn and .icn.
EDIT - html
<a href="#footer-anchor">
<div id="down-icn" data-0="opacity: 1; bottom: 25px;" data-550="opacity: 0; bottom: 100px;">more<i class="icn fa fa-chevron-down fa-2x"></i></div>
</a>
Why don't you just use your anchor for hover selection?
a:hover > #down-icn{
color: #ef5c30;
border-color: #ef5c30;
}
a:hover > .icn {
border: 2px solid #000;
color: #000;
}
OR
#down-icn:hover{
color: #ef5c30;
border-color: #ef5c30;
}
#down-icn:hover > .icn {
border: 2px solid #000;
color: #000;
}
I'm working in Dot Net Nuke on a website that has been previously setup. I want to add a css button I found on the internet. I put the html in the html fields and css in the stylesheet editor.
when a link is created it automatically adds ">>" after the link text. In other buttons css buttons I used I managed to remove that, but with this button I can't remove it. Also I want the button to link to another page using "a href". How would i make this possible?
Button HTML:
<div class="btn-container">
<input type="submit" value="button" id="button-blue"/>
<div class="ease"></div>
</div>
Button CSS:
#button-blue {
float: left;
width: 100%;
max-width: 500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
/* Change text color & background opacity on hover*/
#button-blue:hover {
background-color: rgba(0,0,0,0);
color: #0493bd;
}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease {
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
well you want the button to link to another page, to do that you can simply style your href to look as a button like this (Run the following snippet) -
Submit
<style>
#submit-btn{
display :inline-block;
text-decoration:none;
background-color:blue;
border-radius:4px;
padding:5px 10px;
color:white;
}
</style>
Well for the issue of >> after every link it may be some css that is adding it, which you haven't posted in your question so try adding following code which may remove it..
a:after {
content: none !important;
}
OR this one -
a:after {
display: none !important;
}
or just for the link like button I posted above try this -
#submit-btn:after {
content: none !important;
}
OR
#submit-btn:after {
display: none !important;
}
NOTE - Since you are overwriting CSS don't forget to add !important..
Change to button to href
<div class="btn-container">
Button
<div class="ease"></div>
</div>
CSS
#button-blue{
float:left;
width: 100%;
max-width:500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
text-align:center;
}
/* Change text color & background opacity on hover*/
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
#button-blue:after{content:">>"}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease{
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
demo link
https://jsfiddle.net/0zctLenb/
I want the class to appear a different color after selected. Why does it just go back to the non active color? what can I do so that it stays focused on my class?
I tried many things on this forum but nothing seems to work. I need it for school really quickly.
.Auswahl {
outline: none;
background-color: #F6F6F6;
border: none;
margin-right: -4px;
float: left;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.Auswahl:hover {
background-color: #FF0004;
}
.Auswahl:active {
background-color: #00FF2B;
}
.Auswahl:focus {
background-color: #7100FF;
}
<div class="Auswahl">
<h1>Sparkasse</h1>
<br>Vorteile
<br>Nachteile
</div>
The :focus pseudo-class applies while an element has the focus
(accepts keyboard events or other forms of text input).
More info here
Change your HTML like this:
.Auswahl {
outline: none;
background-color: #F6F6F6;
border: none;
margin-right: -4px;
float: left;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.Auswahl:hover {
background-color: #FF0004;
}
.Auswahl:focus {
background-color: #7100FF;
}
.Auswahl:active {
background-color: #00FF2B;
}
<button class="Auswahl">
<h1>Sparkasse</h1>
<br>Vorteile
<br>Nachteile
</button>
Try this. It's got a very small amount of jQuery to add a new class on click.
HTML
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<div class="Auswahl">
<h1>Sparkasse</h1>
<br>Vorteile
<br>Nachteile
</div>
CSS
.Auswahl {
outline: none;
background-color: #F6F6F6;
border: none;
margin-right: -4px;
float: left;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.Auswahl:hover {
background-color: #FF0004;
}
.Auswahl:active {
background-color: #00FF2B;
}
.Auswahl:focus {
background-color: #7100FF;
}
.newClass {
background-color: #7100FF;
}
JQUERY
$(".Auswahl").click(function(){
$(this).addClass('newClass');
});
Here's a Codepen example too: EXAMPLE HERE
I'm trying to fade in border-bottom and I can't quite seem to get it to work. Here's what I've tried:
#navBar a:hover {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
border-bottom: 1px solid #fff;
}
It just keeps appearing with no transition. What am I doing wrong?
The problem is that you are trying to transition by adding a border, which does not work. You can, however, have the color of the border transition from transparent to #FFF:
HTML:
<div id="navBar">
<a>Link</a>
</div>
CSS:
#navBar a {
border-bottom: 1px solid transparent;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
#navBar a:hover {
border-bottom: 1px solid #FFF;
}
Fiddle: Fiddle
If you want to go from no border to white you should still write default attribute because transition won't do this for you.
http://jsfiddle.net/ZmUAw/3/
#navBar a {
text-decoration: none;
border-bottom: 1px solid transparent;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
And after that you can change it to white with transition
#navBar a:hover {
border-bottom: 1px solid #000;
}
I am trying to get a child element to change when the parent is hovered. I also want an attribute of that parent to change as well. I am trying to get the background color of #action to change and the color of the a or h1 to change when action is hovered over. Is this possible?
here is the html
<section id="action" class="general">
<div class="container">
<h1>This text</h1>
</div>
</section>
and here is the css. CSS is built using SASS that is why it is structured like that.
#action {
background-color: $bgLight;
border-top: 1px solid #252525;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
a {
text-decoration: none;
h1 {
margin: 0;
color: $colorLight;
font-weight: 300;
text-align: center;
}
}
}
#action:hover a {
background-color: #76A7D1;
color: $colorDark;
}
Try this:
#action {
background-color: $bgLight;
border-top: 1px solid #252525;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
a {
text-decoration: none;
h1 {
margin: 0;
color: $colorLight;
font-weight: 300;
text-align: center;
}
}
}
#action:hover{
background-color: #76A7D1;
a{
h1{
color: $colorDark;
}
}
}
You can do the same as #Alessandro Minoccheri suggested but in a less verbose way which I like particularly:
#action {
background-color: $bgLight;
border-top: 1px solid #252525;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
a {
text-decoration: none;
h1 {
margin: 0;
color: $colorLight;
font-weight: 300;
text-align: center;
}
}
&:hover{
background-color: #76A7D1;
a{
h1{
color: $colorDark;
}
}
}
}
The & within #action refers to the parent element, in other words to #action itself.
I like this approach because everything gets self contained within one style declaration and is less repetitive.
It is like saying: "... and when this element is hovered apply these styles to it, and these styles to a and h1".
One small comment regarding your markup #zachstames: a (anchor element) is an inline content element, while h1 (header of level 1) is a block element. According to the W3C specifications an inline element should not contain block elements but only data.
Hope it helps.
Cheers!
This is what you want? DEMO
You are able to make this:
#action:hover {
background: yellow;
}
#action:hover a {
background-color: #76A7D1;
color: white;
}
As you can see I repeat the use of the pseudo-class #action:hover. I'm saying:
"When action is hover, change it's backgroud AND when action is hover, change the background and the font color of the a element".
Hope I've helped.
Be good,
Leonardo