Using jQuery to alter the attributes of a hover class

Question

Using jQuery to alter the attributes of a hover class

Is there a way to modify the Hover-Background-Color?

   <style>
      .myhoverclass {background:#FFF;}
   </style>

I am using this code to toggle:

   $('.box a').hover(
        function(){ $(this).toggleClass('myhoverclass') }
   )

However, when I try to change .myhoverclass with ColorPicker...

  $('#li-a-bgcolor').ColorPicker({
    onChange: function (hsb, hex, rgb) {
        $('#li-a-bgcolor').css('backgroundColor', '#' + hex);
        $('.myhoverclass').css('background-color', '#' + hex);
    }
  });

...the color stays white. Can you point out where the error might be?

Appreciate your help.

jquery html css

Answer 1

Answer №1

It seems like you are trying to choose a color and change the hover color, but modifying the class definition/rule for .myhoverclass {background:#FFF;} can be quite challenging.

Instead of that, I recommend considering a solution similar to this: http://jsfiddle.net/k6kp1e5n/

HTML

<div id="colorPicker">
     <div style="background-color: #0000FF"></div>
     <input type="text" value="#0000FF">
</div>
<br><br>
<div class="box">
    <a href="#">Hover me</a>
</div>

JS

$('#colorPicker').ColorPicker({
    color: '#0000FF',
    onChange: function(hsb, hex, rgb) {
        $('#colorPicker div').css('backgroundColor', '#' + hex);
        $('#colorPicker input').val('#' + hex);
    }
});

// Managing "hover"
$('.box a').on('mouseenter', function (e) {
    $(this).css('background-color', $('#colorPicker input').val());
});
$('.box a').on('mouseout', function(e){
   $(this).css('background-color','#FFF');
});

CSS

.box {background:#FFF;}

Answer 2

It seems like you are trying to choose a color and change the hover color, but modifying the class definition/rule for .myhoverclass {background:#FFF;} can be quite challenging.

Instead of that, I recommend considering a solution similar to this: http://jsfiddle.net/k6kp1e5n/

HTML

<div id="colorPicker">
     <div style="background-color: #0000FF"></div>
     <input type="text" value="#0000FF">
</div>
<br><br>
<div class="box">
    <a href="#">Hover me</a>
</div>

JS

$('#colorPicker').ColorPicker({
    color: '#0000FF',
    onChange: function(hsb, hex, rgb) {
        $('#colorPicker div').css('backgroundColor', '#' + hex);
        $('#colorPicker input').val('#' + hex);
    }
});

// Managing "hover"
$('.box a').on('mouseenter', function (e) {
    $(this).css('background-color', $('#colorPicker input').val());
});
$('.box a').on('mouseout', function(e){
   $(this).css('background-color','#FFF');
});

CSS

.box {background:#FFF;}

Answer 3

Answer №2

Keep it straightforward. Develop two separate classes with specific colors assigned to each. Simply toggle between the classes when hovering and moving your mouse away.

Answer 4

Keep it straightforward. Develop two separate classes with specific colors assigned to each. Simply toggle between the classes when hovering and moving your mouse away.

Using jQuery to alter the attributes of a hover class

Answer №1

Answer №2

Similar questions

Exploring the Power of jQuery Ajax Requests

Creating a form that can identify both letters and numbers using JavaScript

jQuery.appear is seemingly malfunctioning

Enhancing Data Tables with Jquery: Implementing Column Filtering for Multiple Elements within Table Cells

Guide to match the size of <td> with an <img>

Create a stylish design with Bootstrap 3.0 featuring a full-width color background and compact columns perfectly centered on the

Creating a button that integrates an image within a single div element

Display a modal dialog showcasing the progress while making an ajax request

CKFinder Error: Unable to find definition for t.event.special.swipe

The jQuery function $.post fails to include information about which button was clicked in the request

The JQuery click() function may fire twice if triggered by the live() method

Using a loop to format the <ol> tag

Having trouble making class changes with ng-class

Vuetify's scrolling list feature allows for smooth navigation through a list

Adjust the vertical scaling of a container in CSS Grid to maintain aspect ratio similar to an <img>

The issue in jQuery arises from a syntax error within an array

The issue arises when trying to implement CSS keyframes with a CSS image slideshow

Creating an adjustable fixed footer using Bootstrap 3

Having trouble retrieving data from a remote URL with angucomplete-alt

Reimagining scrolling through content with a stylish unordered list (a sleek alternative to a select box