Results 1 to 5 of 5
-
2nd May 2012, 03:58 PM#1
OPMemberWebsite's:
PornShareProject.org MidnightDesires.org
HTML5/CSS3 hover error
Why does this work, but when I add #container it no longer works?
Works just fine:
No longer working due to #containerPHP Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
stage2
{
display:none;
color:black;
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
.stage2:hover + stage2{
display:inline;
}
</style>
</head>
<body>
<a class="stage2" href="#">Hover over me!</a>
<stage2>this is the content for stage2</stage2>
</body>
</html>
What am I doing wrong?PHP Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
stage2
{
display:none;
color:black;
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
#container .stage2:hover + stage2{
display:inline;
}
</style>
</head>
<body>
<div id="container">
<a class="stage2" href="#">Hover over me!</a>
</div>
<stage2>this is the content for stage2</stage2>
</body>
</html>
AlternativeWeb Reviewed by AlternativeWeb on . HTML5/CSS3 hover error Why does this work, but when I add #container it no longer works? Works just fine: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> stage2 Rating: 5
-
2nd May 2012, 04:08 PM#2
Respected Member
Website's:
DL4Everything.com Soft2050.inBecause in the second code, you are trying to select stage2 inside #container
That worksPHP Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
stage2
{
display:none;
color:black;
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
#container .stage2:hover + stage2{
display:inline;
}
</style>
</head>
<body>
<div id="container">
<a class="stage2" href="#">Hover over me!</a>
<stage2>this is the content for stage2</stage2>
</div>
</body>
</html>
The adjacent sibling selector matches only if both of them are from same parent element i.e. #container in this case
-
2nd May 2012, 06:10 PM#3
OPMemberWebsite's:
PornShareProject.org MidnightDesires.orgThanks for clearing that up for me, Soft!
I don't know how I missed that.. . sigh, need more Redbull -- haha!
---------- Post added at 02:10 PM ---------- Previous post was at 12:12 PM ----------
Maybe you or someone can help me out with another issue i'm having.
On rollover the text should popout and the image should change to a different one, but in the code below, the image doesn't change.
What what is the correct way to do this?
PHP Code:<head>
<style type="text/css">
stage2
{
display:none;
color:black;
width:100px;
height:100px;
}
.container {
background-image: url(http://boallen.com/assets/images/randbitmap_true.png);
background-repeat: no-repeat;
background-position: right bottom;
height: 300px;
width: 1000px;
}
.stage2:hover + .container {
background-image: url(http://www.presort.com/wp-content/uploads/random-numbers.png);
}
.stage2:hover + stage2{
display:inline;
}
</style>
</head>
<body>
<div class="container">
<a class="stage2" href="#">Hover over me!</a>
<stage2>this is the content for stage2</stage2>
</div>
</body>
</html>
-
3rd May 2012, 09:14 AM#4
Respected Member
Website's:
DL4Everything.com Soft2050.inNope, you can't do that directly with CSS. You would have to use javascript side by side too: https://developer.mozilla.org/en/DOM...nt.onmouseover
-
3rd May 2012, 12:37 PM#5
OPMemberWebsite's:
PornShareProject.org MidnightDesires.orgThanks for clearing that up for me.
Linkwheel + Backlinks + Free Ping / Plans starts at $15
Midnight Desires.org | Porn Share Project.org
Is your uploads getting deleted? Mask Your Links!
Register To ReplySponsored Links
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Similar Threads
-
HTML5 CSS3 Webtemplate Free
By flanker in forum Contests & GiveawaysReplies: 0Last Post: 1st Aug 2012, 05:18 PM -
[For Hire] Cheap PSD to HTML5+CSS+CSS3 Service
By Apathetic in forum Completed TransactionsReplies: 25Last Post: 8th May 2012, 05:34 AM -
[Hiring] Call for a professional coder (php, html5, css3)
By yudianto79 in forum Completed TransactionsReplies: 0Last Post: 29th Oct 2011, 04:33 PM -
Convert to HTML5\CSS3 or Not ?
By SMOKING in forum Webmaster DiscussionReplies: 1Last Post: 22nd Sep 2011, 07:38 PM -
proxy2surf.com new skin with CSS3
By Zeokat in forum Site ReviewsReplies: 4Last Post: 29th Sep 2010, 09:45 PM
Staff Online
themaPoster - post to forums and...
Version 5.22 released. Open older version (or...