• 0

Changing color in CSS with jQuery


Go to solution Solved by Seahorsepip,

Question

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

12 answers to this question

Recommended Posts

  • 0
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

  • Like 1
Link to post
Share on other sites
  • 0
ashpowell

Why not just use opacity?

Link to post
Share on other sites
  • 0
LaP

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

 

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

Link to post
Share on other sites
  • 0
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.

Link to post
Share on other sites
  • 0
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.

Link to post
Share on other sites
  • 0
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');
		});
	});
Link to post
Share on other sites
  • 0
LaP

Keep in mind it wont work in older browsers.

Link to post
Share on other sites
  • 0
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.

Link to post
Share on other sites
  • 0
ashpowell

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

Link to post
Share on other sites
  • 0
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

Link to post
Share on other sites
  • 0
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

Link to post
Share on other sites
  • 0
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

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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Get this Interactive Learn to Code Bundle at 73% off for just $29.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 73% off the Interactive Learn to Code Bundle. Start writing codes and programs from scratch with 9 interactive courses on SQL, JavaScript, PHP, jQuery, BootStrap, and more.



      This deal consists of the following courses:

      An Interactive SQL Tutorial for Beginners: Introduction to SQL
      Getting Started with SQL Doesn't Have to Be Hard An Interactive JavaScript Course for Beginners
      Learn JavaScript Interactively with a One-of-a-Kind JS Online Course Interactive jQuery Tutorial: Learn jQuery Step-by-Step
      Take an Interactive jQuery Training Course for Beginners to Quickly Master jQuery Events, Effects & More Learn PHP Online: PHP Basics Explained in an Interactive & Fun Manner
      An Interactive Tutorial for Beginners Who Want to Master PHP Basics in a Non-Boring Way The Complete Solidity Smart Contract Guide
      Master Solidity Programming Through Hands-On Experience Master Python Fundamentals the Fun Way: An Interactive Python Tutorial
      A Python Training Course for Absolute Beginners Who Wants to Master the Language Without Getting Bored A Responsive Web Design Course: Find Out How to Create a Responsive Website
      Make a Website Mobile-Friendly with a Step by Step, Responsive Web Design Tutorial Bootstrap Tutorial: Learn to Create Dynamic Websites in a Pinch
      Find Out How to Use Bootstrap the Fun Way by Using an Interactive Course An Interactive Java Tutorial: Learn by Practice!
      Learn Java From Scratch by Combining Theory with Hands-On Coding Experience Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Interactive Learn to Code Bundle normally costs* $112, but you can pick it up for just $29.99 for a limited time - that represents a saving of $82.01 (73%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.


      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Win Your Dream 2020 Tesla Model 3 Giveaway
      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

      running costs.

    • By News Staff
      Save 73% off the Interactive Learn to Code Bundle - now just $29.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 73% off the Interactive Learn to Code Bundle. Start writing codes and programs from scratch with 9 interactive courses on SQL, JavaScript, PHP, jQuery, BootStrap, and more.



      This deal consists of the following courses:

      An Interactive SQL Tutorial for Beginners: Introduction to SQL
      Getting Started with SQL Doesn't Have to Be Hard An Interactive JavaScript Course for Beginners
      Learn JavaScript Interactively with a One-of-a-Kind JS Online Course Interactive jQuery Tutorial: Learn jQuery Step-by-Step
      Take an Interactive jQuery Training Course for Beginners to Quickly Master jQuery Events, Effects & More Learn PHP Online: PHP Basics Explained in an Interactive & Fun Manner
      An Interactive Tutorial for Beginners Who Want to Master PHP Basics in a Non-Boring Way The Complete Solidity Smart Contract Guide
      Master Solidity Programming Through Hands-On Experience Master Python Fundamentals the Fun Way: An Interactive Python Tutorial
      A Python Training Course for Absolute Beginners Who Wants to Master the Language Without Getting Bored A Responsive Web Design Course: Find Out How to Create a Responsive Website
      Make a Website Mobile-Friendly with a Step by Step, Responsive Web Design Tutorial Bootstrap Tutorial: Learn to Create Dynamic Websites in a Pinch
      Find Out How to Use Bootstrap the Fun Way by Using an Interactive Course An Interactive Java Tutorial: Learn by Practice!
      Learn Java From Scratch by Combining Theory with Hands-On Coding Experience Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Interactive Learn to Code Bundle normally costs* $112, but you can pick it up for just $29.99 for a limited time - that represents a saving of $82.01 (73%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Pay What You Want for this Coding 101 Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can Pay What You Want for the Coding 101 Bundle. It's never too late to go back to school: Get ten courses on Python, JavaScript, jQuery, and more.



      What's the deal?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked item:

      jQuery for Beginners
      Study JavaScript & jQuery—The Web's Most Essential Language & Framework

      or beat the average price to get the following items:

      HTML & CSS for Beginners
      Lay the Foundation for Building Amazing Web Pages

      PHP/MySQL for Beginners
      Start Developing Web Apps Like a Pro

      JavaScript for Beginners
      Learn to Craft Dynamic & Interactive Browsing Experiences

      GitHub Fundamentals
      Organize Your Code & Process Smarter

      Python for Beginners
      Dip Your Toes Into Programming with This Beginner-Friendly Language

      Ruby on Rails for Beginners
      Get Familiar with An Increasingly Popular Web Development Tool

      Intro to Web Development
      Discover the Basics of Building Websites from Scratch

      Java Programming for Beginners Part 1
      Pick Up a Valuable New Skill by Learning One of the World's Most Popular Programming Languages

      Java Programming for Beginners Part 2
      Dive Deeper with the Language That Powers Amazon & Facebook

      What's the benefit?
      The bundle represents an overall retail value of $1,990 But you can Pay What You Want for the unlocked course (as little as $1) Beat the average price and you'll take home the entire bundle. Qualify for the giveaway!
      Beat the Leader's price and get entered into the epic giveaway - plus get featured on the Leaderboard!

      >> Pay What You Want for the Coding 101 Bundle <<
      See other Pay What You Want deals. This is a time-limited deal.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out our recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software for Private Internet Access and NordVPN deals.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerce's own determination of retail pricing.

    • By rajibkd
      I am very new to web development and trying to develop a web application. I am kind of stuck at a point. The page let the user insert through a form in mysql database and display the values in a display table on the same page. The display table has edit link for each row , when edit link is clicked then the insert form should display the values based on the id and let the user to edit the values and save the new values in the database.And the display table should be updated to after updating the form.
       
      <div class="main-bod">
          <h1>District Entry Form</h1>
          <div class="row">
              <div class="col-md-6">
                  <form action="<?php echo($config["url"]["actions"]."district-entry.php") ?>" method="post" class="entry-form">
                      <label>District ID:</label>
                      <input type="text" name="id" value="" readonly>
                      <label>Name of District:</label>
                      <input type="text" name="name" autofocus required>
                      <center>
                          <button type="submit"><i class="fa fa-check"> </i> Save</button>
                          <button type="reset" name="reset"><i class="fa fa-undo"> </i> Reset</button>
                      </center>
                  </form>
              </div>
              <div class="col-md-6">
                  <table class="settings-table">
                      <thead>
                          <tr>
                              <th>District ID</th>
                              <th>Name of District</th>
                              <th>Action</th>
                          </tr>
                      </thead>
                      <tbody>
                          <?php
                              $conn = new mysqli(DB_SERVER, DB_USER, DB_PASS, DB_NAME);
                              
                              if ($conn->connect_error) {
                                  die("Connection failed: " . $conn->connect_error);
                              } 
                              $sql = "SELECT id, name FROM district";
                              $result = $conn->query($sql);
                                               if ($result->num_rows > 0) {
                                  while($row = $result->fetch_assoc()) {
                                      echo "<tr><td>".$row["id"]."</td><td>".$row["name"]."</td><td><a href=\"".$_SERVER['REQUEST_URI']."/" . $row["id"] . "\"><i class=\"fa fa-edit\"> </i> Edit</a></td></tr>";
                                  }
                              }
                              $conn->close();
                          ?>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
      <script>
          $("input[name=id]").val(parseInt($("tr:last").find("td:first-child").html())+1);
      </script>
    • By News Staff
      Complete 2019 Web Developer Bootcamp: Build 15 Projects for only $15
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 95% off this Complete 2019 Web Developer Bootcamp: Build 15 Projects. Missed that college computer science course? No problem, we've got everything you missed here.



      What's the deal?
      No coding experience? This is the course for you. Whether you've dabbled in HTML or never touched a single line of code in your life, this course will prepare you to take on professional programming jobs, big and small. From basic CSS styling to popular frameworks like Bootstrap, this training will stack your resume with skills that will check every box on your dream job description. And, with guidance on completing 15 different real-life app projects, this course will prepare you to enter the job market with real portfolio pieces that are sure to impress.

      Become a professional developer w/ 490 lectures & 83 hours of content Understand the most popular languages & frameworks available Learn HTML5 & CSS3 to build and style web pages Use Javascript, jQuery & jQuery User Interface to make interactive sites Make responsive sites for any device w/ Twitter Bootstrap Study data-driven programming w/ PHP, Ajax & mySQL Build mobile apps for iOS & Android Deploy your apps to the Apple App & Google Play store Walk through building 15 real-life app projects Good to know
      Length of access: lifetime Access options: web and mobile streaming Experience level required: all levels Redemption deadline: redeem your code within 30 days of purchase For full descriptions, terms, and instructor info please click here.

      What's the benefit?
      This access to the Complete 2019 Web Developer Bootcamp normally costs $300 but it can be yours for just $15 for a limited time, that's a saving of $285 (95%) off!

      >> Get this deal, or learn more about it <<
      See all Online Courses on offer, This is a time-limited deal, ending soon!

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out our recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here.

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerce's own determination of retail pricing.