Sign in to follow this  
Followers 0

Changing color in CSS with jQuery


13 posts in this topic

Posted

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');
		});
	});

Share this post


Link to post
Share on other sites

Posted

Why not just use opacity?

Share this post


Link to post
Share on other sites

Posted

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

 

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

Share this post


Link to post
Share on other sites

Posted

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.

1 person likes this

Share this post


Link to post
Share on other sites

Posted

<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.

Share this post


Link to post
Share on other sites

Posted

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');
		});
	});

Share this post


Link to post
Share on other sites

Posted

Keep in mind it wont work in older browsers.

Share this post


Link to post
Share on other sites

Posted

 

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:

0

.5

1

 

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

1 person likes this

Share this post


Link to post
Share on other sites

Posted

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:

0

.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.

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.