Phorrogiavorb
New Member
Here is the code in which i am having the problem-\[code\]<!DOCTYPE html><html><head><style type="text/css">p { font-family: Tahoma; line-height: 170%; color: #000; font-size: 15px; padding: 5px 0px 5px 0px; text-align: center;}#col1 { //some propeties}#col1:hover ~ p { color: #f00;}#col2 { //some propeties}#col2:hover ~ p { color: #ff0;}</style></head><body><div id="col1"><span>Hover to view and click to select this color.</span></div><div id="col2"><span>Hover to view and click to select this color.</span></div><p>This is some text.</p><script type="text/javascript">var pElements = document.getElementsByTagName("p");$('#col1').click(function(){for(var i = 0; i < pElements.length; i++) { pElements.style.color = "#f00";}});$('#col2').click(function(){for(var i = 0; i < pElements.length; i++) { pElements.style.color = "#ff0";}});</script></body></html>\[/code\]What i actually want is that when i hover a color div, the color of text in p tag changes for only that time when the color div is hovered. When the color div is clicked the color of text should change permanently.The problem with is that once i click on 1 of the color divs to finalize it for p tag, and then after that the other color is hovered the color change doesnt take place. The color permanently changes on click as it should happen.