CODEWITHSUNDEEP
javascriptjqueryhtml
myolli4
myolli4

Reputation: 199

Problems with jquery

At this moment I am a bloody beginner in Jquery, but the following code based on api.jquery.com in that case this should work:

<a class="btindex">Startseite</a>

$('.btindex').click(function(){$(this).attr('href','index.html')});
$('.btindex').on('mouseover',function(){$(this).css('background-color':'#f2ab1e')});
$('.btindex').on('mouseout',function(){$(this).css('background-color':'#f0c911')});

I also write them in one, because it is more clear to me, but, nevertheless, here is the code:

$('.btindex').click(function(){$(this).attr('href','index.html')}).on('mouseover',function(){$(this).css('background-color':'#f2ab1e')}).on('mouseout',function(){$(this).css('background-color':'#f0c911')});

Also it isn't necessary in this case here is the css file:

.btindex{
cursor: pointer;
background-color:#f0c911;
border:1px solid #e65f44;
color:#c92200;
font-weight:bold;
font-style:italic;
font-size: 150%;
height:10%;
line-height:250%;
padding: auto;
position: fixed;
visibility: hidden;
width:22%;
text-decoration:none;
text-align:center;
}


I hope for quick answers and that the script explains itself, if not I will answer for sure. In any case I build a fiddle as support here :)

Upvotes: 0

Views: 74

Answers (2)

charlietfl
charlietfl

Reputation: 171669

It's generally easier to refrain from setting inline style using css() and simply adding and removing classes to control style

If you know you have to revert back to original state this takes less time to set up with css rules than to add the JS needed to reset back to original css property values

CSS

.btindex.hovered{
  background-color:#f2ab1e;
}

JS

$('.btindex').hover(function(){
  $(this).toggleClass('hovered');
});

hover() with only one callback will cover both mouseenter and mouseleave events

Upvotes: 1

CupawnTae
CupawnTae

Reputation: 14580

You have colons where you should have commas - it should be:

$('.btindex').on('mouseover',function(){$(this).css('background-color','#f2ab1e')});
$('.btindex').on('mouseout',function(){$(this).css('background-color','#f0c911')});

updated fiddle: http://jsfiddle.net/8Hbnk/2/

or you can pass properties in an object to css(), being careful to use camelcase for the property names (e.g. backgroundColor instead of background-color):

$('.btindex').on('mouseover',function(){$(this).css({backgroundColor:'#f2ab1e'})});
$('.btindex').on('mouseout',function(){$(this).css({backgroundColor:'#f0c911'})});

Upvotes: 2

Related Questions