CSS first-child:hover to change another div

Dev Shed Forums Sponsor:

January 28th, 2013, 06:27 PM

jimbo45

Registered User

Join Date: Jan 2013

Posts: 5

Time spent in forums: 1 h 29 m 26 sec
Reputation Power: 0

New Member - CSS first-child:hover to change another div

Hello everyone,

The goal is to affect another element using :hover via first-child.

example:

.class2{
display:none;
}

.class1 li:first-child:hover + .class2 {
display:block;
}

For some reason I cannot affect change on another class when first-child is used - does anyone know if this is possible?

Thanks

January 28th, 2013, 06:51 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,830

Time spent in forums: 6 Months 1 Day 16 h 41 m 9 sec
Reputation Power: 4192

Welcome to DevShed Forums, jimbo45.

We can't really tell what is wrong without seeing your HTML as well.

P.S. When posting code, please place it between [code][/code] tags. If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog). Fortunately though, this forum is scheduled for a very badly needed upgrade.

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

January 29th, 2013, 01:18 AM

khayhurst

Registered User

Join Date: Jan 2013

Posts: 10

Time spent in forums: 3 h 16 m 38 sec
Reputation Power: 0

Improper use of the + operator

I believe the + operator only works for tags directly after the one receiving the action.

Example:

CSS

PHP Code:


		
			
<style type="text/css">

.class2{

display:none;

}



.class1:hover + .class2 {

display:block;

} 

</style>

HTML

PHP Code:


		
			
<div class="class1" style="border:1px solid #000000;">test class 1</div>



<div class="class2" style="border:1px solid #000000;">test class 2</div>

It should work fine, except maybe in IE *rolls eyes*... Now, add a br tag in between the 2 divs and see what happens.

Is javascript a possibility? I would recommend that.

Goodluck!

Last edited by khayhurst : January 29th, 2013 at 01:20 AM. Reason: oops forgot test case in there

January 29th, 2013, 03:32 AM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,830

Time spent in forums: 6 Months 1 Day 16 h 41 m 9 sec
Reputation Power: 4192

Quote:

Originally Posted by khayhurst

I believe the + operator only works for tags directly after the one receiving the action.

Welcome to DevShed Forums, khayhurst.

You mean "combinator", not "operator". Yes, the "+" only works for adjacent siblings. That's why there's also the "~" general sibling combinator.

Quote:

Originally Posted by khayhurst

It should work fine, except maybe in IE *rolls eyes*

Yeah, it won't work in IE6, but will in IE7+ (when not in "quirks mode"). However, in IE7 it may not work if there's an HTML comment between the two elements.

January 29th, 2013, 07:59 AM

jimbo45

Registered User

Join Date: Jan 2013

Posts: 5

Time spent in forums: 1 h 29 m 26 sec
Reputation Power: 0

Hi Kravvitz, thank you for your response and welcoming me to the forums.

I have the same problems when removing the '+' combinator.

I am attemping to use :hover to affect another element. This works fine untill include the 'first-child' selector. I've included some examples including the HTML below:

HTML Example:

Code:

  
<div class="class1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>

<div class="class2">Need this element to be hidden untill first-child li is hovered</div>

CSS:

Code:

.class2{
display:none;
}

.class1 li:first-child:hover  .class2 {
display:block;
}

January 29th, 2013, 09:57 AM

khayhurst

Registered User

Join Date: Jan 2013

Posts: 10

Time spent in forums: 3 h 16 m 38 sec
Reputation Power: 0

May not work with a nested element

Thanks for the welcome and the correction Kravvitz.

I tried putting the hover on class 1 instead and that worked and check this out.

PHP Code:


		
			
.class2{

display:none;

}



.class1 li:first-child:hover~.class2 {

display:block;

}

PHP Code:


		
			
<div class="class1">

  <ul>

  <li>Item 1</li>

  <li>Item 2</li>

  <li class="class2">Item 3</li>

  </ul>

</div>

<div class="class2">Need this element to be hidden untill first-child li is hovered</div>

I'm a little confused myself, it looks as if it will only work on nested elements of the same level and/or type?

Edit: Got a little code happy I guess and didn't notice the link Kravvitz posted. The (~) is a general sibling combinator meaning they must have the same parent. The tilde will not work in this situation.

February 4th, 2013, 12:56 PM

jimbo45

Registered User

Join Date: Jan 2013

Posts: 5

Time spent in forums: 1 h 29 m 26 sec
Reputation Power: 0

Thanks guys for your help, css is just limited someone when trying to affect elements that are not a child, parent or next to the div you are using hover on.

I the end i used jQuery, i posted my solution here: forums.devshed.com/javascript-development-115/jquery-if-true-statements-help-939262.html#post2853370

New Member - CSS first-child:hover to change another div

Developer Shed Advertisers and Affiliates