• 0

Changing color in CSS with jQuery


Question

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');
		});
	});
Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

 

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

Link to comment
Share on other sites

  • 0
<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="https://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="https://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.

Link to comment
Share on other sites

  • 0

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');
		});
	});
Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

This topic is now closed to further replies.