• 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
https://www.neowin.net/forum/topic/1179545-changing-color-in-css-with-jquery/
Share on other sites

12 answers to this question

Recommended Posts

  • 0
  On 29/09/2013 at 16:05, ACTIONpack said:

 

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

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

  • 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');
		});
	});
  • 0
  On 29/09/2013 at 16:35, Seahorsepip said:

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.

  • 0
  On 30/09/2013 at 09:18, ashpowell said:

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

  • 0
  On 30/09/2013 at 12:32, ACTIONpack said:

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

  • 0
  On 30/09/2013 at 21:26, ashpowell said:

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

This topic is now closed to further replies.
  • Posts

    • Weekend PC Game Deals: Automation fests, Civilization for free, charity specials, and more by Pulasthi Ariyasinghe Weekend PC Game Deals is where the hottest gaming deals from all over the internet are gathered into one place every week for your consumption. So kick back, relax, and hold on to your wallets. The Epic Games Store unlocked a big strategy game giveaway earlier this week: Civilization VI: Platinum Edition. Coming in from Firaxis Games, the turn-based 4X experience has you starting world-conquering campaigns to explore, expand, exploit, and exterminate everything in your empire's reach. PvP and co-op multiplayer are also options if the various forms of AI prove to be too easy or even too troublesome. The Sid Meier’s Civilization VI: Platinum Edition giveaway is live until July 24, and it comes with two massive expansions as well as six DLC packs with extra scenarios, leaders, and more. Next week, tower defense title Legion TD 2 will become the latest freebie on the Epic Games Store. The Humble Store brought a new bundle for action game fans this weekend, and it's all about the Devil May Cry franchise. The Devil Trigger Collection begins with DmC: Devil May Cry and Devil May Cry HD Collection for $10. If you want to complete the bundle, it will set you back $20, which gets you Devil May Cry 4 Special Edition as well as the most recent entry, Devil May Cry 5, as well as its Vergil DLC. This bundle has two weeks left on its counter before it goes away. Big Deals Most publishers are returning to their usual weekend specials after the massive summer sales, so there are plenty of discounts to go around. There's even a special Make a Wish charity sale running on Steam with some discounted viral hits. With all those and more, here's our hand-picked big deals list for the weekend: Satisfactory – $27.99 on Steam Captain of Industry – $24.49 on Steam No Man's Sky – $23.99 on Steam Persona 5 Royal – $23.99 on Steam No More Room in Hell 2 – $22.49 on Steam FOUNDRY – $20.99 on Steam Banishers: Ghosts of New Eden – $19.99 on Steam SULFUR – $19.99 on Steam Assassin's Creed Mirage – $19.99 on Steam Alan Wake 2 – $19.99 on Epic Store Grand Theft Auto V Enhanced – $19.79 on Steam Norland – $19.49 on Steam Stray – $17.99 on Steam V Rising – $17.49 on Steam Dyson Sphere Program – $15.99 on Steam The Outlast Trials – $15.99 on Steam Warhammer 40,000: Darktide – $15.99 on Steam The Outlast Trials – $15.99 on Steam Red Dead Redemption 2 – $14.99 on Steam Turing Complete – $13.99 on Steam Eden Crafters – $13.99 on Steam Core Keeper – $13.99 on Steam Thank Goodness You're Here! – $12.99 on Steam Opus Magnum – $9.99 on Steam Autonauts – $9.99 on Steam EXAPUNKS – $9.99 on Steam DRAGON BALL XENOVERSE 2 – $9.99 on Steam Superliminal – $9.99 on Steam Heaven's Vault – $9.99 on Steam RAILGRADE – $9.89 on Steam Goat Simulator 3 – $9.89 on Steam Tchia – $9.89 on Steam ACE COMBAT 7: SKIES UNKNOWN – $9.59 on Steam PAYDAY 3 – $8.99 on Steam Assassin's Creed Origins – $8.99 on Steam Viewfinder – $8.74 on Steam Escape Academy – $7.99 on Steam Pit People – $7.99 on Steam Skull and Bones – $7.99 on Steam Immortals Fenyx Rising – $7.99 on Steam Imperator: Rome – $7.59 on Steam SHENZHEN I/O – $7.49 on Steam Tom Clancy’s The Division 2 – $7.49 on Steam Bassmaster Fishing – $7.49 on Steam Let's Build a Zoo – $6.99 on Steam The Forgotten City – $6.24 on Steam Control Ultimate Edition – $5.99 on Steam Bramble: The Mountain King – $5.99 on Steam Assassin’s Creed Rogue – $5.99 on Steam RoboCop: Rogue City – $4.99 on Steam Kingdom Two Crowns – $4.99 on Steam Scott Pilgrim vs. The World: The Game – $4.94 on Steam Castle Crashers – $4.49 on Steam BattleBlock Theater – $4.49 on Steam TOEM: A Photo Adventure – $3.99 on Steam Supraland – $3.99 on Steam Vampire Survivors – $3.99 on Steam Darkwood – $3.74 on Steam Valiant Hearts: The Great War – $3.74 on Steam TIS-100 – $3.49 on Steam PAYDAY 2 – $3.29 on Steam Cake Bash – $2.99 on Steam Ragnarock – $1.99 on Steam Alan Wake – $1.49 on Steam Civilization VI Platinum Edition – $0 on Epic Store DRM-free Specials Lastly, here are some highlights from the DRM-free discounts available on the GOG store this weekend: Age of Wonders 4 - $29.99 on GOG Pathfinder: Wrath of the Righteous - Game of the Year Edition - $19.99 on GOG Tomb Raider IV-VI Remastered - $19.49 on GOG The Thaumaturge - $19.24 on GOG Chained Echoes - $13.74 on GOG Tyranny - Gold Edition - $12.49 on GOG Tomb Raider I-III Remastered Starring Lara Croft - $11.99 on GOG Baldur's Gate: Enhanced Edition - $9.99 on GOG Baldur's Gate II: Enhanced Edition - $9.99 on GOG Neverwinter Nights: Enhanced Edition - $9.99 on GOG Old World - $9.99 on GOG Icewind Dale: Enhanced Edition - $9.99 on GOG Neverwinter Nights: Doom of Icewind Dale - $7.99 on GOG Kingdom Come: Deliverance - $5.99 on GOG Might and Magic 6-pack Limited Edition - $4.99 on GOG Heroes of Might and Magic 3: Complete - $4.99 on GOG Blood Omen: Legacy of Kain - $3.49 on GOG Might and Magic 8: Day of the Destroyer™ - $2.99 on GOG Worms Armageddon - $2.99 on GOG ATOM RPG: Post-apocalyptic indie game - $2.99 on GOG Keep in mind that availability and pricing for some deals could vary depending on the region. That's it for our pick of this weekend's PC game deals, and hopefully, some of you have enough self-restraint not to keep adding to your ever-growing backlogs. As always, there are an enormous number of other deals ready and waiting all over the interwebs, as well as on services you may already subscribe to if you comb through them, so keep your eyes open for those, and have a great weekend.
    • Wild that this was even allowed from the jump
    • Microsoft stops using China-based engineers to support US defense clients by Hamid Ganji Microsoft announced on Friday that its China-based engineers can no longer provide technical support to the US military and other defence clients using the company's cloud services. Frank Shaw, Microsoft's Chief Communications Officer, wrote on X, "In response to concerns raised earlier this week about US-supervised foreign engineers, Microsoft has made changes to our support for US Government customers to assure that no China-based engineering teams are providing technical assistance for DoD Government cloud and related services." The issue came into the spotlight after a report by ProPublica detailed how Microsoft's Azure engineers in China are providing technical support to the US defense clients. Microsoft had apparently told ProPublica that its engineers and contractors complied with US government laws. These China-based engineers are reportedly supervised through so-called "digital escorts" in the US, who are allegedly less technically qualified than the engineers and can not determine whether the Chinese engineers under their supervision pose a cyber threat to the United States. On Friday, Senator Tom Cotton sent a letter to Defense Secretary Pete Hegseth, demanding explanations about how these "digital escorts" are trained to detect threats, as well as the list of contractors that use Chinese personnel. "The US government recognizes that China's cyber capabilities pose one of the most aggressive and dangerous threats to the United States, as evidenced by infiltration of our critical infrastructure, telecommunications networks, and supply chains," Cotton wrote. In a video posted on X, Hegseth said this is "obviously unacceptable" and that he's issuing a two-week review of Pentagon cloud deals to ensure that "China will no longer have any involvement whatsoever in our cloud services, effective immediately." The US Defense Secretary also said the current controversy is due to "A legacy system created over a decade ago, during the Obama administration." Microsoft, Amazon, Google, and Oracle jointly received a $9 billion Department of Defense cloud services contract in 2022.
    • This morning down to 17% after 8 days.
    • Cutcon 4.0 by Razvan Serea Cutcon is a free, open-source desktop app for cutting, converting, and previewing video, audio, and image files. Built with Kotlin and powered by FFmpeg, it's fast, lightweight, and easy to use. Ideal for content creators, editors, and developers, Cutcon supports a wide range of media formats and offers a clean user interface. Originally forked from the Clipper project, it enhances performance and usability while remaining fully cross-platform. Whether trimming videos or converting audio formats, Cutcon streamlines your workflow without compromising quality. Perfect for those seeking a simple yet powerful media processing tool. Cutcon offers three core functions that make working with media files fast and simple: Cut – Remove unwanted sections from video, audio, or image files without re-encoding. Keep only what you need. Convert – Change files from one format to another using FFmpeg. Supports a wide range of formats for video, audio, and images. Preview – Play media directly inside the app before cutting or converting. Quickly verify content without opening another program. Cutcon 4 release notes: This release rebases Cutcon on Clipper v1.20.0 bringing support for Linux and macOS and updating the app branding. Also, there is now only one variant of the app with support for most common media types. New features Add support for Linux operating system (common distros) Add support for macOS operating system (experimental) Add support for playing FLAC audio format Add support for playing Opus audio format Improvements Update app brand (logo, colors) Improve media player to hugely boost its performance Use a fake file for the app initial input source Make theme colors change with animation Update the app error window layout Misc Change log file directory to user home Several improvements in app code Download: Cutcon 4.0 | 89.8 MB (Open Source) View: Cutcon Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • First Post
      artistro08 earned a badge
      First Post
    • First Post
      paul29 earned a badge
      First Post
    • Dedicated
      Homeless Vagrant earned a badge
      Dedicated
    • One Month Later
      Coolray5432 earned a badge
      One Month Later
    • Week One Done
      Coolray5432 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      498
    2. 2
      ATLien_0
      223
    3. 3
      Michael Scrip
      196
    4. 4
      Xenon
      161
    5. 5
      +FloatingFatMan
      138
  • Tell a friend

    Love Neowin? Tell a friend!