Question

I need some help in jquery or javascript.

I managed to do the hover effects using css and js but i can't seem to "hold" the hover effects on the default page or even after i clicked on a particular page and landed there.

Am i missing something in my css or js or both?

You can download the working files here together with the instructions + screenshots so that you can better understand what i am trying to describe:
https://www.dropbox.com/s/tige8a9uqay7mcj/WorkingFiles.zip?dl=0

Thanks.

Answer 1

Hi,

I have just made few changes only in your jquery code. myscript.js file. Pasting the code below.

$(document).ready(function(){

   /*$("#contentNav1").css({
       'font-weight': 'bold',
       'text-decoration': 'underline'});*/
      
   $( "#contentNav1" ).click(function() {
       $( "#contentImg" ).attr( "src", "images/boxImage1.jpg" );
       $( "#contentText" ).html("contentNav Paragraph Text 1<br>contentNav Paragraph Text 1<br>contentNav Paragraph Text 1" );
  
       $.persistHover(this);

   });
   $( "#contentNav2" ).click(function() {
       $( "#contentImg" ).attr( "src", "images/boxImage2.jpg" );
       $( "#contentText" ).html("contentNav Paragraph Text 2<br>contentNav Paragraph Text 2<br>contentNav Paragraph Text 2" );
       $.persistHover(this);  
      
   });
   $( "#contentNav3" ).click(function() {   
       $( "#contentImg" ).attr( "src", "images/boxImage3.jpg" );
       $( "#contentText" ).html("contentNav Paragraph Text 3<br>contentNav Paragraph Text 3<br>contentNav Paragraph Text 3" );
       $.persistHover(this);
          
   });
   $( "#contentNav4" ).click(function() {   
       $( "#contentImg" ).attr( "src", "images/boxImage4.jpg" );
       $( "#contentText" ).html("contentNav Paragraph Text 4<br>contentNav Paragraph Text 4<br>contentNav Paragraph Text 4" );
       $.persistHover(this);  
   });
   $.persistHover = function(element)
{

   $(element).parent().children().css({
       'font-weight': 'normal',
       'text-decoration': 'none'});
$(element).css({
       'font-weight': 'bold',
       'text-decoration': 'underline'});
}
});

Some notes regarding the solution.

1) From your question, I understood that your hover is working fine but you want to persist the hover effects even after you click the link and un-hover.

2)Basically there is no onclick effects in css that would provide you the style changes after you click an element.

3) There is :active selector in css but it's effects will fade away after you click and leave the focus on contentNav elements.

4) I did not know whether you needed the first element "contentNav1" to be bold and underlined on page load. If you need it just uncomment the first callback function ("#contentNav1").css.

5) No changes required in CSS file.

To overcome the challenge, I created a function persistHover in jquery. It takes the element as the parameter i.e. The element in which you are calling the function.

Function works as below.

1) Remove all the effects (bold and underline) of all the children of its parent element . Here in case it will remove all effects of children (li) of its parent (ul).

2)Add bold and underline effect to the element of which onlick event the persistHover function is invoked. For example, if we call onclick of contentNav2 the element contentNav2 is passed through click event function to persisthover function and the css are applied to the element. (While the last clicked element becomes normal).