This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
I am trying to make it so that so that a hover effect will apply for both a listed item tag and an anchor tag that it is nested in. Ideally I want it so that all the CSS is on one tag instead of split into two. I want the hover effect of the anchor tag to animate when the listed element tag is triggered. I'm assuming the solution would be to merge the styles into one but I don't know how to do it.
HTML:
<ul class="nav">
<li>
CONTACT
</li>
<li>
ABOUT
</li>
<li>
PORTFOLIO
</li>
</ul>
CSS:
body{
background: #000;
}
ul{
list-style-type:none;
display: inline-block;
}
.nav{
float:right;
list-style-type:none;
overflow: hidden;
}
.nav li{
float:right;
overflow: hidden;
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px;
margin-left: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.nav li:hover{
background:#00bff3;
color:#000000;
}
.blue{
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.blue:hover{
color:#000000;
}
http://jsfiddle.net/2gbu5yrz/
It's easy enough to move the relevant styles to the links themselves (really where they should be anyhow):
http://codepen.io/pageaffairs/pen/PwNeEO
.blue{
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
display: block;
text-align: center;
padding: 8px;
}
.blue:hover{
color:#000000;
background:#00bff3;
}
Maybe this is what you are looking for: Replace .blue:hover with .nav li:hover .blue.
http://jsfiddle.net/p0ahhp5c/
The solution is to make your a use block display style:
.blue{
display: block;
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
Try this
.nav:hover .blue:hover {
/*your code here*/
}
Related
Why css animation is not working in my code. When i want to hover my link.
.floridabt-nav .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
background-color: transparent;
color: #f9dd04;
transition: all 0.3s ease;
}
.floridabt-nav .dropdown-menu>li>a:focus:before, .dropdown-menu>li>a:hover:before{
content: "\2192";
color: #222222;
padding-right: 10px;
-moz-transition: padding-right .3s ease-in;
-o-transition: padding-right .3s ease-in;
-webkit-transition: padding-right .3s ease-in;
transition: padding-right .3s ease-in;
}
Look at the snippet. Now the transition works.
ul was missing in the selector
first css rule need of any declaration of padding
you have to put the transition declaration into the first rule (not under hover or focus)
in the second css rule you have to use padding and not padding-right
in the second css rule you don't need of transition declaration
I hope I was of any help.
.floridabt-nav .dropdown-menu>ul>li>a, .dropdown-menu>ul>li>a{
background-color: transparent;
color: #f9dd04;
-moz-transition: padding 0.3s ease-in;
-o-transition: padding 0.3s ease-in;
-webkit-transition: padding 0.3s ease-in;
transition: padding 0.3s ease-in;
padding: inherit;
}
.floridabt-nav .dropdown-menu>ul>li>a:focus, .dropdown-menu>ul>li>a:hover{
color: #222222;
padding: 10px;
}
<div class="floridabt-nav">
<div class="dropdown-menu">
<ul>
<li>
PADDING TRANSITION
</li>
</ul>
</div>
</div>
I have two divs, when one hovers over the text (which are links) of a div, the padding increases from 0 to 5px. My issue is that whenever I hover over the text and the padding increases, the divs move down. Here's the code:
<div id="container" class="text1">
<a id="text1style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">Some text</a>
</div>
<div id="container" class="text2">
<a id="text2style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">text</a>
</div>
#container {
position:relative;
}
a:link, a:visited, a:active {
color:blue;
}
a:hover {
color:yellow;
}
.text1box {
left:200px;
bottom:35px;
width:243px;
}
#text1style {
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
}
#text1style:hover {
padding:5px;
border-radius:10px;
background-color:red;
}
.text2 {
left:455px;
bottom:57px;
width:90px;
}
#text2style {
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
}
#text2style:hover {
padding:5px;
border-radius:10px;
background-color:red;
}
Updated code: I have applied the padding expansion to the individual links, instead of the div, and this has helped out. I still have two issues: 1) The texts (of links) still shift slightly to the right. 2) When I remove the mouse (i.e: hover ends) you can see that the text has lost padding and border radius as the background (red) fades away.
How could I resolve these two issues? Many thanks.
You can do that by moving the 2 boxes upward to compensate for the padding moving them downward.
And id should be unique
.container {
position: relative;
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
-ms-transition: color 0.5s;
transition: color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
transition: background-color 0.5s;
background-color: red;
text-align: center;
}
.box1 {
left: 200px;
/*bottom: 35px;*/
width: 221px;
border-radius: 10px;
}
.box2 {
left: 455px;
/*bottom: 57px;*/
width: 66px;
border-radius: 10px;
}
a:link,
a:visited,
a:active {
color: blue;
}
a:hover {
color: yellow;
}
.container:hover {
top: -5px;
padding: 5px 0;
background-color: dodgerblue;
}
.container.box1:hover + .box2 {
top: -10px;
}
<div id="container1" class="container box1">
<a href="#" style="font-size:120%;
text-decoration:none;">Some text</a>
</div>
<div id="container2" class="container box2">
<a href="#" style="font-size:120%;
text-decoration:none;">text</a>
</div>
Based on question edit, updated with a 2:nd sample, where I added padding: 0 5px to the a:link rule to compensate for the hovered padding
#container1, #container2 {
position: relative;
}
a:link,
a:visited,
a:active {
color: blue;
padding: 0 5px;
}
a:hover {
color: yellow;
}
.text1box {
left: 200px;
bottom: 35px;
width: 243px;
}
#text1style {
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
-ms-transition: color 0.5s;
transition: color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
transition: background-color 0.5s;
}
#text1style:hover {
padding: 5px;
border-radius: 10px;
background-color: red;
}
.text2 {
left: 455px;
bottom: 57px;
width: 90px;
}
#text2style {
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
-ms-transition: color 0.5s;
transition: color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-ms-transition: background-color 0.5s;
transition: background-color 0.5s;
}
#text2style:hover {
padding: 5px;
border-radius: 10px;
background-color: red;
}
<div id="container1" class="text1">
<a id="text1style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">Some text</a>
</div>
<div id="container2" class="text2">
<a id="text2style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">text</a>
</div>
I created a jsfiddle for you:
https://jsfiddle.net/squeLsa6/
<div id="" class="box1 container">
Some text
</div>
<div id="" class="box2 container">
text
</div>
<style type="text/css">
.container {
position:relative;
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
padding:5px;
}
a:link, a:visited, a:active {
color:blue;
padding:5px;
}
a:hover {
color:yellow;
padding:5px;
}
.box1 {
left:200px;
bottom:35px;
width:221px;
border-radius:10px;
}
.box2 {
left:455px;
bottom:57px;
width:66px;
border-radius:10px;
}
.container:hover {
background-color:dodgerblue;
}
</style>
Basically I moved the padding from the hover state to the a's and the container. I also converted container to be a class, because id's should be unique. I'm not sure exactly how you want it to work, so you may need to play with it a little, but this should get you started.
First of all, you confused the id with classes. I changed the name ID with CLASS and it works; In the Css the classes have "." and IDs have "#", be aware of this. When i hover on the div it take a padding of 5px and it is natural that the other div lightly move due to the padding.
If you don't want to move the box you have to give padding anywhere apart of padding-bottom.
I want to my text and image gain white color at the same time, when one of them is on hover.
How #btnicon can gain :hover, when li a is :hover?
li a {
transition: .7s ease-out;
color: #9d9d9d;
text-decoration: none;
display: block;
padding: 0 20px;
text-align: center;
line-height: 60px;
font-size:20px;
}
li a:hover{
transition: .7s ease-out;
color: #FFFFFF
}
#btnicon{
width:15px;
height:15px;
margin-right: 5px;
transition: .7s ease-out;
}
#btnicon:hover{
transition: .7s ease-out;
-webkit-filter: brightness(200%);
}
<li><img id="btnicon"src="http://s11.postimg.org/bqc94ncoj/home.png">Home</li>
Since the image is in inside a you can do this:
li a:hover #btnicon {
transition: .7s ease-out;
-webkit-filter: brightness(200%);
}
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 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