Replicate the actions of CSS using jQuery

I am trying to create a button that will have the same behavior using jQuery as it does with CSS.

HTML:

<br>
<button class="pure-css">Test</button>
<br>
<br>
<br>
This is jQuery :
<br>
<button class="pure-jQuery">Test</button>

CSS:

.pure-css {background-color:#aaa;}
.pure-css:hover{background-color:#ccc;}
.pure-css:active{background-color:#fff;}

jQuery:

// Setting default style via jQuery
{
$(".pure-jQuery").css("background-color","#aaa");
}

// Applying hover style with jQuery
{
$(".pure-jQuery").css("background-color","#ccc"); 
}

// Implementing active style using jQuery
{
$(".pure-jQuery").css("background-color","#fff"); 
}

// Returning to default on mouse out if needed

{
 // Return to default style if needed   
}

View the live example on jsFiddle :

http://jsfiddle.net/CtKs8/12/

jquerycssbutton

Answer №1

 $(document).ready(function(){
      $('.pure-jQuery').css('background-color','#bbb');
  $('.pure-jQuery').mouseover(function(){  
     $(this).css('background-color','#cdc');
  });
   $('.pure-jQuery').mouseleave(function(){  
     $(this).css('background-color','#bbb');
  }); 

$('.pure-jQuery').mousedown(function(){
     $(this).css('background-color','#fff');
  });
  $('.pure-jQuery').mouseup(function(){  
     $(this).css('background-color','#bbb');
  });

 });

This code has been thoroughly tested and is guaranteed to work flawlessly.

Answer №2

Here is a simple solution to make it work:

$(".pure-jQuery").hover(function(){
    $(this).css("background-color","#ccc")
},function(){
    $(this).css("background-color","#fff")
});

You can see it in action here: http://jsfiddle.net/uniqueexamplelink

Cheers

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A web page with a full-width header, content constrained to a set width, logo elements displayed with flexbox, and a footer that

I've been facing challenges in making this website responsive on both desktop and mobile devices. Initially, the header background image wasn't displaying as intended, followed by issues with the flexbox logo elements in the header and the sticky ...

htmlcssresponsive-designsticky-footer

Having trouble getting flex-wrap to function properly on my div element

For the 928px breakpoint, my aim is to: Have my right column (.vd-right-col) positioned at the bottom of the page. (I attempted to achieve this using flex-wrap:wrap; but it did not work.) Arrange the two images in this column side by side. Unfortuna ...

htmlcssflexbox

Creating a button with text in Win32 using C++

How can I add a basic text button to my C++ Win32 application? I have tried using the CreateWindowEx function, but I'm struggling to figure out the correct style to achieve this. I want the button to only display text and receive messages when clicked ...

c++winapibutton

What is the solution to determining the width in AngularJS without taking the scrollbar size into account

How can I retrieve the window inner height without including the scrollbar size when using $window.innerHeight? ...

javascripthtmlcssangularjs

What is the best way to reduce the distance between labels and input fields?

Currently, I am utilizing Blazorise along with Bootstrap 5, however, I have noticed that the spacing between the input field and the label is too wide. Here is an illustration of the space between the input and the label: Is there a way for me to reduce ...

htmlcssblazorbootstrap-5blazorise

The issue of margin error and vertical alignment on pseudo-elements

Here's the HTML code I am working with: <article> <picture> <img src="a.png"> </picture> </article This particular HTML code is used throughout my page, where the image has a varying width. The goal is to c ...

htmlcss

Is there a way to create an internal link to another HTML templating engine page within Express.js?

I am currently facing an issue with two Pug files, index.pug and search.pug, stored in a /views folder. In my index.pug file, I have the following line of code: a(href="/search.pug") Search In my JavaScript file, I have specified the view engine as P ...

javascriptcssnode.jsexpress

Expand the element's functionality to encompass the overscroll area on OS X

I have a webpage with a fixed background and a floating footer at the bottom. When users on OS X overscroll, they can see the background below the footer. Rather than disabling overscrolling for my page, I want to extend the bottom div to cover the backgro ...

javascripthtmlcssmacosoverscroll

Displaying vertical content with a horizontal scroll using Bootstrap

I have created a div container and I would like to implement a horizontal scroll bar when there are more than four items (each item consists of a picture with a title). Desired outcome: https://i.sstatic.net/wWucQ.png The issue I am facing is that by usi ...

csstwitter-bootstrapbootstrap-4

Does an equivalent of the JQuery PHP Library exist, utilizing $.ajax in place of $.php?

The JQuery PHP Library introduces an object named $.php, which operates similarly to $.ajax. Here is an example of how it can be used: $.php(url); php.complete = function (){ $('#loading').slideUp('slow'); } While this library enh ...

phpjqueryajaxjson

The AJAX event is failing to send data

When using two ajax calls, the first one populates a dropdown box successfully. However, the second ajax call utilizes a change event function to list product details with images whenever a dynamically populated item from the dropdown is clicked. In the c ...

javascriptphpjqueryajax

Customize your Bootstrap design by selecting a background color that doesn't

Why is the dropdown background black when used in a bg-dark navbar but white when used outside of the navbar? I want to use a white dropdown in a dark navbar. Here is my complete code: MyCode Here is my navbar & dropdown: <nav class="na ...

htmlcssbootstrap-5

Tips for maintaining focus while tabbing in a contenteditable field?

Why does the table lose focus every time I press tab instead of inserting a white space? How can I change this so that pressing tab just inserts a regular tab space? ...

javascriptjqueryhtml

Switching back and forth between celsius and fahrenheit using jQuery (my mistake in the code)

I am currently using Ajax to interact with the openweather API. Everything seems to be functioning correctly except for one issue. My goal is to create a button that toggles between displaying temperature in Celsius and Fahrenheit. When I click the button ...

javascriptjquery

Verifying if a div in jQuery holds a specific element

I am currently developing drag and drop widgets using jQuery. After dropping them, I need to verify if my draggable and droppable widget is located inside another div. <div id="droptarget"> <div class="widget">I'm a widget!</div> ...

jqueryhtmldrag-and-drop

What is the best way to iterate through elements that come after a specific element?

I'm confident that I will be able to provide an answer to this very soon... Here's a sample code snippet: <script> function ClearAndRunFuncs(element) { //Clears responses for elements AFTER this element with an onchange //Executes the uni ...

javascriptjquery

Prevent the execution of an event while another event is already running in jQuery

Two events are in play here: one with the onclick function which scrolls to a specific div upon menu item click, and the other utilizes the onscroll function to "highlight" the corresponding menu item when scrolling near the div. The burning question is: ...

javascriptjqueryevents

Tips on how to include a unique style sheet for IE8 in WordPress

Struggling with responsive behavior in IE8, some parts of my Wordpress website at are not displaying correctly due to issues with the @import query. To tackle this problem, I am considering creating a separate style sheet for IE6, 7, and 8 using the follo ...

phpcsswordpressinternet-explorer-8

How can I use JQuery to select an element with a style attribute in Internet Explorer?

When using JQuery, I have set my target to be the following: <li style="margin-left: 15px;">blah<li> I am using this code to achieve that: $(".block-category-navigation li[style='margin-left: 15px;']").addClass('sub-menu' ...

jquerycssinternet-explorerjquery-selectorstarget

What steps can be taken to retrieve data from a database table using JavaScript?

I am encountering a very peculiar issue. The values that I need are visible when I receive them as a message from the server-web console. However, when I try to retrieve them using a for loop, I encounter an error 05-22 18:58:23.203: I/Web Console(29392): ...

javascriptjquerycordova