Ben Scmidth Ben Scmidth - 2 months ago 19
Javascript Question

Change buttons on mouseover and mouseout?

I have created this but no idea why was the code cus it's not workin, Can anyone spot a mistake? I want to create a button, it's called Calculator and once the mouse over, the button will change to Powered by X and back to Calculator when mouseout.

<div class="col-xs-12 btn btn-change" style="border:solid 1px #ccc">
<a href="{{ site_url }}tips/tools" id="calc_butt"> <h4 class="oswald
hoverorange"><img src="{{ site_url
}}themes/carsome/assets/images/icon_calculator.png" width="22px"
style="margin-top:-5px">&nbsp; Calculator</h4></a></div>

<script type="text/javascript">
$(function(){
$('#calc_butt').mouseover(function(){
//alert();
var change = '<h4>Powered by <img src="xxx/images/X.png" style="width:30%;"></h4>';
$(this).fadeIn(change,100);
});

$('#calc_butt').mouseout(function(){
//alert();
var change = '<h4 class="oswald hoverorange"><img src="xxx/images/icon_calculator.png" width="22px" style="margin-top:-5px">&nbsp; Calculator</h4>';
$(this).fadeIn(change,100);
});
})
</script>

Answer

use $('#calc_butt').html(change); instead of $(this).fadeIn(change,100);

Edit

I changed a method of doing it. Instead of using javascript i used css to achieve the desired output. Please let me know if it's helpful

<div class="col-xs-12 btn btn-change" style="border:solid 1px #ccc" id="toggleDiv">
<a href="{{ site_url }}tips/tools" id="calc_butt"> <h4 class="oswald
hoverorange" id="calculator">
 Calculator</h4>

<h4 id="poweredby">
Powered by!
</h4>

</a>

</div>


<style>
#poweredby{display:none}
div#toggleDiv h4#calculator {
display:inline;
}
div#toggleDiv:hover h4#calculator {
display:none;
}
div#toggleDiv h4#poweredby {
display:none;
}
div#toggleDiv:hover h4#poweredby {
display:inline;
}
</style>
Comments