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>
Related
I'm using a very fancy webkit filter to make background-images grayscale, and on hover over the images become color.
Here's the filter
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
As you can see, there's even a 'transition' property so that the image has a smooth fading transition into full color. The problem that I'm having is that the div I'm applying it to is also affecting the child text positioned inside the div, turning the text into grayscale as well. This is a problem because the text needs to be white, even when not being hovered over.
I've tried negating the filter with another one on the child text but it doesn't seem to work... Check out the fiddle
Fiddle http://jsfiddle.net/yMHm4/1/
This is not a problem of properties inheritance, as you can think.
The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.
So the only alternatives left are:
1) Change the HTML, as Lowkase suggested
2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.
CSS
.cell{
opacity:0.7;
width:420px;
height:420px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.A1 {
position: relative;
}
.A1:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
#text {
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
.cell:hover {
opacity:1.0;
}
.A1:hover:before {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
fiddle
I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.
Added example using brightness filter (for webkit)
demo 2
You had a couple of HTML errors with your br's, they should be br/, not /br.
The following solution takes the text container out of the image div and places it as an absolute positioned element:
http://jsfiddle.net/yMHm4/3/
#text {
position:absolute;
top:10px;
left:25%;
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
<div id="container">
<div id="row">
<div class="cell A1"></div>
<div id="text">
<b>SPINDRIFT KIOSK</b>
<br/>
Digital Collage
<br/>
<i>Mikey</i>
</div>
</div>
</div>
You could probably use "not" selectors in your CSS but I am not sure how cross browser friendly they are. This solution is a more plain jane way to do it.
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:
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.
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.
I have a menu where the elements have a simple animation on hover, changing background color and text color.
Since the element has a border with outset style, I would like to change it to inset to make it look coming forward. However the transition doesn’t seem to work for the border-style property, so the final effect doesn’t look very well, as the change in border style happens immediately and only later the background changes.
Any ideas how to make this work? I found it strange that border-style can‘t be transitioned. If so, any turnaround?
Here’s the code:
#main_menu a, #main_menu li {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
} /*Hover animation */
#main_menu li:hover { background: #4488CC; border-style: inset; }
#main_menu li {
/*GRAPHICS*/
list-style: none;
border: 3px outset #496181;
margin: 10px;
background: #333;
PS: I don’t want to use jquery for this
Your question may have been hastily written, but I think you're missing an _ in the first selector. Also, it seems that you're animating the border-style from outset to outset, so you won't see any differences. It does indeed work, I've created a demo that changes the border-color on jsfiddle for you to take a look at.
Another solution would be to create the border as a button image and stretch it in the div and just use box-shadow. That way your user will still see a smooth button movement by the transition in the shadow.