Is there a way to have CSS3 transitions/animations for a div that's just been added to/removed from the window or just has its style assigned? One scenario would be a tab control where the content has transitions when a tab header is clicked; this is normally done by assigning a different CSS style to the div that contains the content (without transition) that you want to display:
tabs-content > div{display:none;}
tabs-content > div.active{display:block;}
It occurred to me that most of the examples out there are using CSS3 transitions triggered by :hover.
Try this:
tabs-content > div{
opacity:0;
-moz-opacity:0;
-webkit-opacity:0;
transition-duration:1s;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
}
tabs-content:active > div{
opacity:1;
-moz-opacity:1;
-webkit-opacity:1;
}
You can see this live on jsFiddle.
CSS can't be triggered like that. You'll have to use JavaScript to either add a class to that element and let CSS animate it (I doubt it will work), or animate it directly with JavaScript.
I'd choose the latter.
For transitions/animations: I would use jQuery because you can delegate events to elements that may not have been created yet. You also have more control and if you add/remove elements using jQuery then you can add animation at the same time.
css:
.elementInactive {
display:none;
}
jquery:
$('tabs-content > div').hover(function() {
$(this).toggleClass('elementInactive');
});
For swapping one style with another (not an animation): I would use css' :hover property. Support for this property dates back long before CSS3, so it is a safe solution. IE has problems with using a 'div' element with :hover, so use an 'a' element with display:block to treat it like a div:
css:
tabs-content > a:hover {display:block;}
tabs-content > a {display:none;}
Related
This sound silly, but I want to apply a CSS to a content inside and element tag.
Example:
<div class="wrap">
Tag 1
,
Tag 2
,
Tag 3
</div>
Is there any possibility that I'll be able to remove or hide the comma , every between the tag using CSS? I have no idea how to tweak a generated output for tags that contains comma.. so I was thinking if this would be possible using CSS?
This might work, allthough css might not be the best way. How did they get there in the first place... Css is for style (hence StyleSheet), not for content.
.wrap{
visibility:collapse;
}
.wrap a{
visibility:visible;
}
And a jsFiddle demo
CSS3 selectors are fun, but can be difficult to understand what is happening, and the support for older browsers is minimal.
Hide text node in element, but not children
You can use this css for hiding your comma.
.wrap{
visibility:collapse;
}
.wrap a{
visibility:visible
}
I'm creating a button (actually just a link), which design is rather complicated, and as I am optimizing for IE8, can not be made with CSS3. I have therefore placed a <span> inside the <a>, and put a background image on both.
The image changes on :hover and :active. It works pretty great in all browsers, but not so much in IE. :hover works fine, but when clicking on the <span>, the :active state of the parent <a> is not triggered. It sort of makes sense, but I've seen it work before, so I guess there must be some workaround?
Here's a fiddle: http://jsfiddle.net/TheNix/EtjL3/
You can try using the following jQuery to add the css inline on click.
$("a, span").click(function(){
$(this).css("background", "green")
$(this).find("span").css("background", "lime")
});
Here's a jsFiddle for it http://jsfiddle.net/ollie/r5NDw/1/
alternatively you can add classes on click using addClass();
You can set a css class for the active state using jquery or javascript.
Edit
You can set a css class like this...
$(document).ready(function() {
$("a span").click(function() {
$(this).addClass("active");
$(this).parent().addClass("active");
});
});
and Css Style...
a.active { background:green; }
a.active span { background:lime; }
Ignoring internet explorer 6 and latter, how do I script the css to achieve the following results:
It would hide the information until UpgradeI, UpgradeII or UpgradeIII is hovered. Site link is Here
There is around 500 pages like that, so tweaking or adding javascript in the html is not feasible. I think CSS is the way to go to do this, but I've tried:
div.UpgradeI {display:none;}
div.UpgradeI:hover {display:inline;}
but it just hides everything and doesn't show the information when hovered. Anyway, if its not possible to achieve the same result using css only, please show me what code to add. Thanks!
Okay, it's possible to do this with CSS. First of all, those styles you suggest don't work because if it starts out with display:none, there is nothing to hover on for the next style to kick in.
I was able to add this to your site with Firebug:
div.UpgradeI,
div.UpgradeII,
div.UpgradeIII {
height:20px;
overflow:hidden;
}
div.UpgradeI:hover,
div.UpgradeII:hover,
div.UpgradeIII:hover {
height:auto;
}
That is the ugliest hack in history, but it achieves the desired effect without changing the HTML or adding Javascript. The paragraph below doesn't slide up because everything is positioned absolutely. If you start using float styles for everything else, though, it'll work.
Obviously, you can edit the height to show more/less of the div as necessary.
It would be hard to do it with only css. Because once you set the element style to display:none, it's not possible to catch the :hover event by the element.
I would suggest to use jquery to create a place holder element at the empty place. When the mouse hover over this element, then display the alternative "real" element.
you can try this plug in to see if you like it.
http://cherne.net/brian/resources/jquery.hoverIntent.html
UpgradeI table, UpgradeII table, UpgradeIII table {
display: none;
}
UpgradeI table:first-child, UpgradeII table:first-child, UpgradeIII table:first-child {
display: inline;
}
UpgradeI:hover table, UpgradeII:hover table, UpgradeIII:hover table {
display: inline;
}
By the way: Your markup is painfully.
This works on Firefox 4.0 (and probably Firefox 3.0, Chrome, Safari, etc; though I did not test on them). This definitely won't work on IE6, because IE6 does not support :hover on arbitrary element, :nth-child() selector, and the sibling selector (~):
div.UpgradeI table:first-child ~ *:nth-child(n+3), div.UpgradeII table:first-child ~ *:nth-child(n+3), div.UpgradeIII table:first-child ~ *:nth-child(n+3) {
display: none;
}
div.UpgradeI table:first-child:hover ~ *, div.UpgradeII table:first-child:hover ~ *, div.UpgradeIII table:first-child:hover ~ * {
display: block;
}
I have the following html snippet:
page title goes here<br />
<span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>
Here is the css for these classes
.title
{
color:#707070;
}
.username
{
color:#8DAAB8;
}
.dateandtime
{
color:#A5A7AC;
}
Is it possible to change the colors of these 3 items when hovering over the title?
The colors I want the items to change to are as follows
title = 000000
username = DF821B
dateandtime = 3185B6
Not sure if this is possible with css, if the html snippet structure needs to change, that will not be a problem.
I know this can be done with javascript, but wanted to know if it is possible without javascript.
Use the :hover pseudoclass:
.title:hover
{
color: #000000;
}
etc. This works in all browsers, except in IE6 and earlier, which doesn't support :hover on anything other than hyperlinks (A elements).
Edit 1: I see you want to change them all while hovering over the title. In that case, it becomes a little more complicated. You should put a <div> around it and apply the :hover pseudoclass on that. It won't just be the title (which is also possible, but has even less chance of working in IE). For that:
<div class="someclass">Title<span class="username">username</span><span class="dateandtime">date and time</span></div>
is your HTML, but your CSS would be:
.someclass .title:hover { color: #000000; }
.someclass .title:hover ~ .username { color: #DF821B; }
.someclass .title:hover ~ .dateandtime { color: #3185B6; }
Where ~ is the sibling selector (meaning it should have the same parent (.someclass) as the .title:hover).
#Harry Joy: No, it's not. My answer is different, not to mention I don't have enough rep to post comments.
Edit 2:
As requested, to make them all change while hovering over the entire container, use the above HTML with the following CSS:
.someclass:hover .title { color: #000000; }
.someclass:hover .username { color: #DF821B; }
.someclass:hover .dateandtime { color: #3185B6; }
(though basically credit for that goes to Spudley for suggesting it first).
Not totally clear on the question -- do you want each of them to have their own hover colour, or do you want all three to change colour at once, when you hover on any of them?
In the first case, it's easy: just add a :hover style for each of the three elements (you already have answers to this effect, so I won't repeat them here).
In the second case, you'll need a container element that would take the hover, so your code would look like this:
<span class='container'>
page title goes here<br />
<span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>
</span>
(you may want to use <div> rather than <span>, but I'll leave that up to you)
Your CSS would then look like this:
.title {color:#707070;}
.username {color:#8DAAB8;}
.dateandtime {color:#A5A7AC;}
.container:hover .title {color:#000000;}
.container:hover .username {color:#DF821B;}
.container:hover .dateandtime {color:#3185B6;}
Obviously, change the colours in the new styles to whatever you want them to be. If all three should be the same, then you could simplify the three new styles down to something like this:
.container:hover span, .container:hover a, {color:#000000;}
Hope that helps.
One final thing to note: IE6 and below do not support the :hover style on anything except <a> elements. My recommendation to you is simply not to support IE6 for your site (there are plenty of other things broken in IE6 too), but if you do need to support it, there are hacks available to get :hover to work with it. See Whatever:Hover.
It's definitely possible, just append this to your CSS:
.title:hover
{
color:#000000;
}
.username:hover
{
color:#DF821B;
}
.dateandtime:hover
{
color:#3185B6;
}
This called a pseudo-class and will make your anchors change color when hovered )
Edit:
At first I misunderstood your question, this isn't the solution!
You can't do this in CSS alone, but you can do it jQuery easily!
Here's an example.
What you need to do is set up a class for each of the hovered states, then use jQuery to replace add a class that will change the colors as you want :)
You just have to include the jQuery framework if you haven't already:
In the <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
Well you could do this one of two ways but not with CSS, you can either add and remove the appropriate classes (unobtrusive JavaScript) or change the styles directly. For instance:
document.getElementById('someElement').style.color = '#FF0000';
Or you can use a JavaScript library such as jQuery.
jQuery('p.someClass').mouseOver(function(e) {
e.target.style.color = '#FF0000';
})
.mouseOut(function(e) {
e.target.style.color = '#000000';
});
ive been googling but cannot seem to find a mouse out method, similar to hover, for css.
Is there one and if so how should it be coded?
You only need the :hover pseudo-class for this, when you mouse out of the element, it'll return to it's default non-:hover state, like this:
.class { color: black; }
.class:hover { color: red; }
when you hover, the color will be red and when you "mouseout", the color will return to black because it no longer matches the :hover selector. This is the default behavior for all browsers, nothing special you need to do here.
If you want to do something programmatic, you're looking for the mouseout JavaScript event.
There is the :hover pseudo-class:
element:hover { color: red }
there is no event or selector for when the :hover status ends, if that is what you're looking for.
You will have to turn to Javascript and the onmouseout event for that.
There is no mouse out event in CSS. You need javascript in order to do that.
There isn't a mouseout-type selector for CSS.
But an element's normal style is its "mouseout" state!
What, exactly are you trying to do that normal CSS and the :hover selector don't cover?
Chances are, you can do it with JavaScript. See here or here.
You are looking for the :hover pseudoclass.
a:hover {background: red;}
will highlight any link you hover over.
You can only have the following CSS 'events' as far as I'm aware.
a (default),
a:hover,
a:active,
a:visited
AFAIK There is no mouse out event but
if you want for the link you visit earlier you can use
a:visited{
}