Bojan Ivanac Bojan Ivanac - 11 days ago 5
CSS Question

I wrote Jquery code that changes a button on hover, but I wrote the code separately for every button. How do I make it a function

So yeah. I wrote the code separately for every single button on my website. How do I make this a Jquery function I can use for every single button I want to.

The code looks like this:



$(document).ready(function() {
$("#linkXML").hover(
function() {
$("#linkXML").css({
"-webkit-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)",
"-moz-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)",
"box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)"
});
},
function() {
$("#linkXML").css({
"-webkit-box-shadow": "",
"-moz-box-shadow": "",
"box-shadow": ""
});
}
);
});





So basically, I just copy pasted the code for every single button and changed only the element it's called upon on.

If you would be so kind to tell me how to make it a single function I can just give an element and it would call the function upon it.

Answer

I would use CSS as its intended, and not JS for this.

#linkXML
{
    // your styles, if any
}

#linkXML:hover
{
    -webkit-box-shadow: inset 0px 0px 98px -34px rgba(51,173,255,0.79);
    -moz-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79);
    box-shadow: inset 0px 0px 98px -34px rgba(51,173,255,0.79);
}

If you need this style on multiple elements, then apply a class.

Comments