Anyone here really good with Cascading Style Sheets? - FMVperformance.com : The site for all your Ford Mazda and Volvo needs
Reply
 
LinkBack Thread Tools
post #1 of 37 (permalink) Old 06-03-2009, 08:22 PM Thread Starter
Banned
 
Join Date: Feb 2007
Location: Toronto - ON - Canada
Posts: 13,838
Anyone here really good with Cascading Style Sheets?

Heyo. I currently have web app that has part of the DOM like this:

<div class="displayBook">
<img />
<p> </p>
<ul></ul>
</div>

Currently, that unordered list is display:none. I want to have it show up when img:hover is triggered.

Obviously .displayBook img:hover ul { display:block; } will not work as its not a child node of the image.

I want to basically achieve this:

.displayBook img:hover {
ul {
display:block;
}
}

but again, one cannot do nested selectors. Is there an operator or syntax to basically say "Once this is true, do this" ?
agm_ultimatex is offline  
Sponsored Links
Advertisement
 
post #2 of 37 (permalink) Old 06-03-2009, 08:25 PM
Senior Member
 
sdemo45's Avatar
 
Join Date: May 2007
Location: The Heat
Posts: 36,000
Re: Anyone here really good with Cascading Style Sheets?

I wish I got into CSS when I did HTML, but I moved on to Flash. I know both ActionScript and JavaScript have "If/Else" statements, so you may want to search that on Google.



sdemo45 is offline  
post #3 of 37 (permalink) Old 06-03-2009, 08:28 PM Thread Starter
Banned
 
Join Date: Feb 2007
Location: Toronto - ON - Canada
Posts: 13,838
Re: Anyone here really good with Cascading Style Sheets?

i know its easily doable with dom scripting, or even using jquery to reduce repeatable code. But Id like to avoid using javascript for this if at all possible, because its a pretty key feature, and I dont want to screw over users who have a hatred towards javascript, and have it turned off. This project could potentially get really huge, but right now its specifically towards colleges in ontario. Mine runs IE 7 on its computer images, as well as FF 3.08.

Something like

$(document).ready(function() {
$('.displayBook > img').each(function() {
$(this).onmouseover = function() {
$(this).sibling('ul').style.display = 'block';
}
});
});

That might not work exactly, but its roughly the code for it
agm_ultimatex is offline  
post #4 of 37 (permalink) Old 06-03-2009, 08:53 PM
Senior Member
 
sdemo45's Avatar
 
Join Date: May 2007
Location: The Heat
Posts: 36,000
Re: Anyone here really good with Cascading Style Sheets?

Oh, I didnt mean that you should use JavaScript in there, I just thought that there would be something similar to the IF/ELSE statements that both of those languages have.

Like I said, I never got into CSS. I wish I could be of more help...



sdemo45 is offline  
post #5 of 37 (permalink) Old 06-03-2009, 10:07 PM
F1 Driver
 
Join Date: Dec 2004
Location: San Francisco
Posts: 10,739
Re: Anyone here really good with Cascading Style Sheets?

You can only modify an element's own properties within its own hover class, so that's not possible unfortunately. Easy in Jquery though

Do you have a mockup of the layout and desired interaction? It might be possible to do it with CSS hovers, but you'd need to tweak your hierarchy a little bit, probably by adding another wrapper div.

For example, instead of marking the UL hidden, you can wrap both the image and the ul in a fixed size div with overflow: hidden, and then on hover, expand the size of that wrapper div so that the ul is visible.


To view links or images in signatures your post count must be 0 or greater. You currently have 0 posts.
cali_axela is offline  
post #6 of 37 (permalink) Old 06-04-2009, 08:56 AM Thread Starter
Banned
 
Join Date: Feb 2007
Location: Toronto - ON - Canada
Posts: 13,838
Re: Anyone here really good with Cascading Style Sheets?

Well they are currently siblings, so im not sure if there a syntax code one can use in the selector to symbolize that. Was asking my friends when we went out rock climbing last night, and they couldnt think of it either.
agm_ultimatex is offline  
post #7 of 37 (permalink) Old 06-04-2009, 09:15 AM
F1 Driver
 
crazyduckme's Avatar
 
Join Date: Feb 2009
Location: West Chester, PA
Posts: 24,208
Send a message via AIM to crazyduckme Send a message via Yahoo to crazyduckme
Re: Anyone here really good with Cascading Style Sheets?

have you tried going to http://www.w3schools.com/css/default.asp ?
they've helped me a lot in the past


To view links or images in signatures your post count must be 0 or greater. You currently have 0 posts.



To view links or images in signatures your post count must be 0 or greater. You currently have 0 posts.
xoxo Michelle
To view links or images in signatures your post count must be 0 or greater. You currently have 0 posts.
crazyduckme is offline  
post #8 of 37 (permalink) Old 06-04-2009, 10:36 AM Thread Starter
Banned
 
Join Date: Feb 2007
Location: Toronto - ON - Canada
Posts: 13,838
Re: Anyone here really good with Cascading Style Sheets?

I havent, looked quickly through there, found this. http://www.w3.org/TR/CSS2/selector.html 5.7 might be exactly what I need. i gtg to class now, gonna try this later
agm_ultimatex is offline  
post #9 of 37 (permalink) Old 06-04-2009, 12:36 PM
F1 Driver
 
Join Date: Dec 2004
Location: San Francisco
Posts: 10,739
Re: Anyone here really good with Cascading Style Sheets?

Wow, that looks pretty cool. I've never used + syntax in CSS. If it works reliably in all browsers, that's super awesome.


To view links or images in signatures your post count must be 0 or greater. You currently have 0 posts.
cali_axela is offline  
post #10 of 37 (permalink) Old 06-04-2009, 12:38 PM
F1 Driver
 
Join Date: Dec 2004
Location: San Francisco
Posts: 10,739
Re: Anyone here really good with Cascading Style Sheets?

Do you think you can chain them? Like: div.displayBook > img + p + ul:hover { display: block; }

That would be hot.


To view links or images in signatures your post count must be 0 or greater. You currently have 0 posts.
cali_axela is offline  
Sponsored Links
Advertisement
 
Reply

  FMVperformance.com : The site for all your Ford Mazda and Volvo needs > Misc > Lounge

Quick Reply
Message:
Options

Register Now



In order to be able to post messages on the FMVperformance.com : The site for all your Ford Mazda and Volvo needs forums, you must first register.
Please enter your desired user name, your email address and other required details in the form below.

User Name:
Password
Please enter a password for your user account. Note that passwords are case-sensitive.

Password:


Confirm Password:
Email Address
Please enter a valid email address for yourself.

Email Address:
OR

Log-in










Thread Tools
Show Printable Version Show Printable Version
Email this Page Email this Page



Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

 
For the best viewing experience please update your browser to Google Chrome