I just got into learning CSS3 and HTML5 and right now I'm trying to get my span text to transition into another color when the mouse hovers over the .link div with the following code. For some reason it is not working, I have tried a couple of things to get it to work but no luck so far.
Can anybody help me fix the issue or point me into the right direction?
Thank you!
--
HTML
<div id="celebrity-list">
<header>
<h2>Celebrities</h2>
</header>
<div id="a">
<span class="letter">A.</span>
<div class="links">
</div>
</div>
</div>
CSS
#celebrity-list > div span.letter{
position: relative;
font: 22px Arial;
color: #3a3a3a;
-webkit-transition: color .3s ease-out;
-moz-transition: color .3s ease-out;
-o-transition: color .3s ease-out;
-ms-transition: color .3s ease-out;
transition: color .3s ease-out;
}
#celebrity-list > div .links:hover #celebrity-list > div span.letter{
color: #b43838;
}
#celebrity-list > div .links{
position: relative;
width: 190px;
height: 342px;
background: #f2f2f2;
-webkit-transition: border .3s ease-out;
-moz-transition: border .3s ease-out;
-o-transition: border .3s ease-out;
-ms-transition: border .3s ease-out;
transition: border .3s ease-out;
}
At first, your CSS selectors are incorrect. The x > y selector only selects direct children. Both span.letter and div.links are no direct children of #celebrity-list so will not be selected by these selectors. The ">" may be removed in this situation. Next to that, an ID should always be unique.
This is not working at all:
#celebrity-list > div .links:hover #celebrity-list > div span.letter{
color: #b43838;
}
You are trying to select span.letter, as a child of a div, as a direct child of #celebrity-list, as a child of .links:hover, as child of a div, as direct child of #celebrity-list.
If you want to change span.links text color you should put this element after the div#links and select it as follows:
div.links:hover + span.letter { /* your CSS */ }
Another option is to put span.letter inside div.links (as a direct child) and use the following selector:
div.links:hover > span.letter { /* your CSS */ }
If you really want to leave span.letter before div.links in your HTML you should use javascript to accomplish the result wanted.
it is because div.links is a sibling of the span.letter
your selector must be a parent of the markup you might want to apply a style.
Related
this question might be obvious but i'm new in css.
I'm animating a shape so when you hover it, it stretches. I've completed the hover on with a nice ease transition but when you move off the mouse the transition doesn't work. Is there a way to make it happen also in the hover off moment?
.shape1{
position: absolute;
background:red
top:512px;
width:180px;
height:140px;
}
.shape1:hover {
height: 160px;
top:492px;
transition: 0.2s ease;
}
Your answer
You have added the transition property on the hover state of the element. Therefore the transition is not applied when you leave the cursor from the element.
.shape1{
position: absolute;
background: red;
top: 512px;
width: 180px;
height: 140px;
transition: .2s ease; /* move this here from :hover */
}
Further information
Besides this you can also add specific properties to the transition. For example, if you only want the height to be animated you could it like this:
.shape1 {
transition: height .2s ease;
/* this inly affects height, nothing else */
}
You can even define different transition-times for each property:
.shape1 {
transition: height .2s ease, background-color .5s linear;
/* stacking transitions is easy */
}
Add the transition before the :hover, so the transition always applies
.shape1 {
transition: 0.2s ease;
}
The :hover selector is used to select elements when you mouse over them.
W3Schools
When you add also transition to your shape1 class it should works
I have a site (http://sheisbiddy.com/the-f-word/) where the Read More link jumps when you hover your mouse over it. It only started happening when I added padding to it to make it the same size as the box below. Here's the CSS:
a.more-link {display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition: color, background-color 0.1s linear; -webkit-transition: color, background-color 0.2s linear; -o-transition: color, background-color 0.1s linear;}
I'm using Safari if that makes a difference.
Well, when you hover, you're adding 10px of padding on the top and bottom that aren't there in the standard style. Try removing these elements from hover
padding-top:10px; padding-bottom:10px;
That, or you'll want to add this padding to your other style.
You want the padding to be a part of your un:hoverd selector. That way applying the padding only upon hovering doesn't add any size to the link.
a.more-link {padding 10px 0;}
Alternatively, since you're already using transitions you can add a padding transition to make the "jump" animated.
a.more-link { transition: padding 0.2s linear; }
Depending on how you want, you could add the padding to the base class like so :
https://jsfiddle.net/78s24fpw/
a.more-link { padding-top:10px; padding-bottom:10px;display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition:
Alright this may sound like a complete noob question but I was wondering.
Is it possible to use CSS to do what I am requesting?
The link and code listed below, Makes it to where your menu buttons light up when you hover over them, How ever I am wondering if It's possible to do the same effect with a container full of content..
http://71012.site90.net/
<!DOCTYPE html>
<html>
<head>
<style>
body{ background:#000; margin:0px; }
div#menubar1{ padding: 24px; border:#999 1px dashed; }
div#menubar1 > a{
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
background: #333;
padding: 12px 24px;
color:#999;
margin-right: 10px;
text-decoration:none;
border-radius: 3px;
-webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
div#menubar1 > a:hover{
background: #6F8A00;
color:#FFF;
}
</style>
</head>
<body>
<div id="menubar1">
ExampleExampleExampleExampleExample
</div>
</body>
</html>
Once again, Sorry if this is a complete noob question, I am just really interested because I enjoy the way this effect looks.
If you're looking for a container to be hovered as opposed to a sibling, you can use the children selectors (>, *, & ) and apply the :hover to the parent
If you're looking to affect the following siblings you can use the sibling selectors (+ & ~) and apply the :hover to the sibling that is before the others
The last option is to do as Chris suggested and apply the same hover event to all elements of the class or type, but this only affects elements of the same class of type
For more information and insight for CSS selectors, this is a GREAT article
You can simply use a class for the effect, and then assign that class to whichever object you would like:
.hover-effect:hover {
background: blue;
}
And your HTML:
Hover
<div class="hover-effect">Same hover effect applied here</div>
Demo
hover
<p>Text here</p>
I want the <p> to fade in and slide in when the <a> is hovered. Problem is, with the CSS in the demo, the <p> just "pops" in rather than animating.
The transition shorthand doesn’t support multiple properties in the same place:
transition: max-height .5s ease, opacity .5s ease;
You also need overflow: hidden to make it look like it’s sliding. Updated demo
You need to comma seperate the properties you want to transition:
p {
opacity: 0;
max-height: 0;
transition: max-height .5s ease, opacity .5s ease;
}
http://jsfiddle.net/pZngX/
I have the following demo: http://jsfiddle.net/EHrk4/2/
Is it possible that #main remains opacity 1 until I hover over the hyperlink, then it goes to 0.3?
HTML:
<div id="main">
hover me to fade out main
</div>
CSS:
#main {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
height:400px;
width:400px;
background:red
}
#main:not(:hover) {
opacity: 0.3;
}
Many thanks for any pointers.
No - your link is inside the element you want to affect, and currently there is no parent selector in CSS2 or in CSS3.
If your anchor was a sibling element of the div, you could affect the div's opacity as you wish - like in this quick jsFiddle example.
Example of affecting sibling in pure CSS:
HTML:
hover me to fade out main
<div id="main">
</div>
CSS:
a:hover + #main {
opacity:0.5;
}
If it has to be inside, I'd recomend using a Javascript library such as jQuery to achieve it.
Or, take a look at the the following answer, which explains a workaround for opacity affecting child elements.
I would do it via jquery personally.
http://jsfiddle.net/EHrk4/5/
JQ
$('#link').hover(function(){
$('#main').addClass('hover');
}, function(){
$('#main').removeClass('hover');
})
CSS
#main {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
height:400px;
width:400px;
background:red
}
.hover {
opacity: 0.3;
}
EDIT:
From our comments, here is how to do it while still preserving the child elements opacity of 1.
http://jsfiddle.net/EHrk4/11/
Yes this is posible for example:
#main,a{
display:block;
height:100px;
width:100px;
}
Make the height,width of the anchor tag same as #main. So when you hover the link it will give you the affect all over the #main. Other wise you can use jquery for this.