Changing color in CSS with jQuery

[ACTIONpack]

I had my filter setup so that when you hover a <li> the product-brief class would hide. The problem doing that, the page move because the div is no longer there. I want to change the color instead to white so that people will not see the text when hovering over. The jQuery code is below. I try to set it is for css instead of hiding but not working.

$(function() {
		$('.product-List li').hover(function() { 
		$(this).parents('.grid_12').children('.product-brief').css('color', '#FFFFFF');
	}, function() { 
		$('.product-brief').css('color', 'black');
		});
	});

[Seahorsepip]

 

I got it fix now. Here is my code. Much easier than I thought!

$(function() {
		$('.product-List li').hover(function() { 
		$(this).parents('.grid_12').children('.product-brief').css('opacity', '0.0');
	}, function() { 
		$('.product-brief').css('opacity', '1');
		});
	});

No need to use 0.0 for opacity instead use just 0

 

What most people use:

0.0

0.5

1.0

What should be used in my opinion:

.5

1

 

And use visibility instead of opacity as people sayed above in the comments already :p

[ashpowell]

Why not just use opacity?

[LaP]

If you are using visibility: hidden it should not move.

 

Display: none removes the elements while visibility: hidden hides it without removing it.

[Brian M.]

Does the element you're changing contain any a tags? Remember that child elements (such as a's) will have their own style unless you inherit them.

[ACTIONpack]

<div class="grid_12">
					<div class="grid_3">
						<ul class="product-List">
							<li class="product-Header">Waxes</li>
							<li class="product-link">
								<a href="http://romabio.com/products/ecocera-hard-wax/#tabs-techsheet" class="product class-low-impact ie-interior ie-exterior surface-plaster surface-wood use-commercial use-residential" data-filter="specialty">EcoCera Hard Wax</a>
								<a title="TDS...file coming soon">TDS</a>
								<a href="" title="MSDS...file coming soon">MSDS</a>
								<ul>
									<li class="product-List01">
										<div class="product-description">
											<div class="product-Bg">
												<img src="http://romabio.com/wp-content/uploads/2013/06/headline-bg40.jpg" alt="" />
											</div>
											<div class="product-Bucket">
												<img src="../images/products/ecocera-wax/bucket.png" alt="EcoCera Hard Wax" />
											</div>
											<ul class="product-Title">
												<li><h1>EcoCera Hard Wax</h1></li>
												<li><h2>Waxes Products</h2></li>
											</ul>
											<div class="product-Left">
												<span>low-impact</span> <span>interior</span> <span>exterior</span> <span>plaster</span> <span>wood</span> <span>commercial</span> <span>residential</span>
											</div>
											<div class="product-Right">
												<p>ROMA's EcoCera Hard Wax is a water-based liquid paste finish available for interior/exterior application on BioMarmorino and Grassello Bio Plasters - it provides a protective covering against oil and water stains while simultaneously permitting a high-gloss wax finish.<br><br>EcoCera Hard Wax is a ROMA Low Impact ECO-Series Product.</p>
											</div>
										</div>
									</li>
								</ul>
							</li>
							<li class="product-link">
								<a href="http://romabio.com/products/ecocera-soft-wax/#tabs-techsheet" class="product class-low-impact ie-interior ie-exterior surface-sheetrock surface-plaster surface-masonry surface-cementious-board surface-wood surface-metal use-commercial use-residential" data-filter="specialty">EcoCera Soft Wax</a>
								<a title="TDS...file coming soon">TDS</a>
								<a href="../wp-content/downloads/MSDS/MSDS-EcoCera-Soft-Wax.pdf" title="MSDS DOWNLOAD">MSDS</a>
								<ul>
									<li class="product-List01">
										<div class="product-description">
											<div class="product-Bg">
												<img src="http://romabio.com/wp-content/uploads/2013/06/headline-bg41.jpg" alt="" />
											</div>
											<div class="product-Bucket">
												<img src="../images/products/ecocera-anti-graffiti/bucket.png" alt="EcoCera Soft Wax" />
											</div>
											<ul class="product-Title">
												<li><h1>EcoCera Soft Wax</h1></li>
												<li><h2>Waxes Products</h2></li>
											</ul>
											<div class="product-Left">
												<span>low-impact</span> <span>interior</span> <span>exterior</span> <span>sheetrock</span> <span>plaster</span> <span>masonry</span> <span>cementious board</span> <span>wood</span> <span>metal</span> <span>commercial</span> <span>residential</span>
											</div>
											<div class="product-Right">
												<p>ROMA's EcoCera Soft Wax is a water-based liquid finish for interior/exterior application on most paints, stuccos, plasters, stone, concrete, and wood products. This product mimics solvent paste waxes but is sacrificial - it is removable by hot water or steam. 
<br><br>EcoCera Soft Wax is a ROMA Low Impact ECO-Series Product.</p>
											</div>
										</div>
									</li>
								</ul>
							</li>
						</ul>
					</div>
					<div class="product-brief">
						<p>ROMA's EcoCera Soft Wax is a water-based liquid finish for interior/exterior application on most paints, stuccos, plasters, stone, concrete, and wood products. This product mimics solvent paste waxes but is sacrificial - it is removable by hot water or steam.
<br><br>EcoCera Soft Wax is a ROMA Low Impact ECO-Series Product.</p>
<p>ROMA's EcoCera Soft Wax is a water-based liquid finish for interior/exterior application on most paints, stuccos, plasters, stone, concrete, and wood products. This product mimics solvent paste waxes but is sacrificial - it is removable by hot water or steam.
<br><br>EcoCera Soft Wax is a ROMA Low Impact ECO-Series Product.</p>
					</div>

It can't be done in CSS because it's outside of the <li> which is why I try to side it.

[ACTIONpack]

I got it fix now. Here is my code. Much easier than I thought!

$(function() {
		$('.product-List li').hover(function() { 
		$(this).parents('.grid_12').children('.product-brief').css('opacity', '0.0');
	}, function() { 
		$('.product-brief').css('opacity', '1');
		});
	});

[LaP]

Keep in mind it wont work in older browsers.

[ACTIONpack]

No need to use 0.0 for opacity instead use just 0

What most people use:

0.0

0.5

1.0

What should be used in my opinion:

.5

1

And use visibility instead of opacity as people sayed above in the comments already :p

Yes, I saw that when I put the one for opacity. Just didn't upload the new one yet. Watch a TV show. But thanks for pointing it out.

[ashpowell]

Sorry if I've missed it but why not just use css, why the js?

[ACTIONpack]

Sorry if I've missed it but why not just use css, why the js?

its outside the parent and can't be done with js

[ashpowell]

its outside the parent and can't be done with js

 

 

Would .child:hover .parent{visibility:hidden} not work? Sorry if I'm being a bit dumb I'm so tired

[ACTIONpack]

Would .child:hover .parent{visibility:hidden} not work? Sorry if I'm being a bit dumb I'm so tired

I try with CSS alone but it does not work for some reason. JQuery works best