jquery hover not working properly in wordpress

1 Views

So my idea is to have title underlined and on hover it should disappear, but for some reason, I can’t find a way to do it properly.

Here is my code:

Read More
a.attr("href", jQuery('.underlined').attr("href"));    
a.hover(
  function() {
    jQuery(this).css({"text-decoration":"none"});
  },
  function() {
    jQuery(this).css({"text-decoration":"underline"});
  }
);

Currently this is working like this: when a user loads the page the title is not underlined, and when user hovers over the title and move cursor away then that title is underlined and from then on it is working as it should.

Just to recap what I want:

  1. Title should be underlined by default
  2. When a user hovers over the title, underline should disappear

Any ideas?

Thank you.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Create a css rule based on a class (in style.css) , eg .newclass{text-decoration:underline;}. Then uses jQuery to addClass. , or removeClass to make the changes.

    Add another class called something like ‘alreadyunderlined’ the the title, then before removing the ‘newclass’ simply check if the ‘alreadyunderlined’ class exists. That way you can be sure it only get’s changed the first time you hover over the title.

    I hope that makes sense.

  2. You should set text-decoration: underline; be default value, when page loads. By using CSS:

    .underline {
    text-decoration: underline;
}

    or by using jQuery (javascript (but why?)) :

    jQuery(document).ready(function($){
    $('.underline').css({'text-decoration' : 'underline'});
});