The functionality of CSS hover effects is blocked by Jquery

In my latest project, I have created a unique menu feature where the color of the field changes when hovering over it. I then used jQuery to dynamically change the CSS onclick.

However, I encountered an issue where the hover effect stopped working after the click event. I need to find a way to keep the hover effect active even after a user clicks on the field.

Here is the code: (view the code on jsfiddle: http://jsfiddle.net/Cwmpf/ )

.vbtn { color:#000B41; }
.vbtn:hover { background-color:#1A2040; color:white; cursor:pointer; }

<div id="overskrift1" class="vbtn" felt="1">Vare</div>
<div id="overskrift2" class="vbtn" felt="2">Guide</div>

<script type="text/javascript">
    $('div.vbtn').click( function() {
        $('div.vbtn').css({'background-color':'white','color':'#000B41'});
        $(this).css('background-color','#1A2040');
        $(this).css('color','white');
        felt = $(this).attr('felt');
        $('div.vniv').each(function() {
            if($(this).attr('felt') != felt) { $(this).css('display','none'); }
            else { $(this).css('display','block'); }
        });
    });
</script>

Answer №1

Create a CSS class called .active to style an active div.

.active{
    background-color: #1A2040;
    color: white;

}

Use JavaScript to toggle this class.

$('div.vbtn').click( function() {
    $("div.vbtn").removeClass("active");
    $(this).addClass("active");
    felt = $(this).attr('felt');
    $('div.vniv').each(function() {
        if($(this).attr('felt') != felt) { $(this).css('display','none'); }
        else { $(this).css('display','block'); }
    });
});

JSFIDDLE: http://jsfiddle.net/Cwmpf/1/

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

Is there a way to ensure consistent border thickness in a material-ui table layout?

In my current setup of a material UI table, I have applied a 1-pixel thickness to all elements. This leads to a slightly thicker appearance at the points where two cells meet compared to the outer edges. How can I achieve a consistent border width of 1px ...

Is CSS being dynamically generated by style?

I have a website that I need help with: The footer on my site is currently black and I want to remove it To fix this issue, I have to adjust the height in this line of code <div style="position: relative; height: 126px;" id="footer-sidebar" class="fo ...

Adjusting Images and Icons' Sizes Automatically on a Single Line

Imagine a row of social media icons/images (like Facebook, Twitter, LinkedIn) displayed together. How can I ensure that when I add more icons/images to this row, their sizes adjust automatically to stay on the same line instead of moving to the next one? I ...

"Solving the mystery of AJAX failing to receive a response from the servlet

In my code, I am using AJAX to send a POST request to a servlet. The servlet processes the request and sends back a response. In the success function of the AJAX call, I perform certain actions based on the response. Here is the AJAX CALL: $.ajax( { ...

Jquery's .load() function lags by one step

On a webpage, I have a section that is generated in the following way. <table> <c:forEach items="${personList}" var="person"> <tr> <td> </td> <td> <h2 s ...

Difficulty encountered when loading JSON data using the getJSON function

When I open the JSON file in my web browser and input this code into the console: var p = document.getElementsByTagName('pre'); for(i=0; i < p.length; i++) { var data = JSON.parse(p[i].innerHTML); var pc = data.postalcodes; for (va ...

Storing the path of a nested JSON object in a variable using recursion

Can the "path" of a JSON object be saved to a variable? For example, if we have the following: var obj = {"Mattress": { "productDelivered": "Arranged by Retailer", "productAge": { "ye ...

I need help converting the "this week" button to a dropdown menu. Can someone assist me in troubleshooting what I am missing?

Seeking assistance with customizing the "this week" button on the free admin dashboard template provided by Bootstrap 4. Looking to turn it into a dropdown feature but unable to achieve success after two days of research and watching tutorials. See code sn ...

Employing jQuery for adding a class to the initial TD in every table row

Currently, I am dealing with a table structured like this: <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tablecontent"> <tr class="tablerow"> <td>This is the td I want to add a class to.</td> <td c ...

Tips for getting rid of the excess space surrounding an image within a div tag

Placing images inside bootstrap card divs within col divs is my current challenge <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"& ...

Guide on using Ajax and spring MVC to dynamically fill a modal form

One JSP page displays database results in a table on the browser, allowing users to edit or delete each row. I want to implement a feature where clicking the edit link fetches specific customer data from the database using Spring MVC and Hibernate, display ...

How to locate an ID following an AJAX call in jQuery

I am experiencing an issue with a button that is supposed to print a form containing data based on different IDs, where each form has a unique ID. The problem arises when the main page fails to locate these IDs. Below is the JavaScript code responsible f ...

What is the best way to save text in a selenium test script in order to display the total number of search results discovered on various search engines?

I'm currently tackling an assignment in my web applications testing class that involves creating a test script to evaluate the functionality of a search engine and then capturing and displaying the number of search results. The search bar that I' ...

Problem with logging in using ajax

I'm attempting to implement an on-page login feature. It functions perfectly without the use of ajax. Below is my login.php code; if($_POST) { $username =$_POST["username"]; $password =$_POST["password"]; $query = $handler->query("SE ...

Issue with populating dropdown menu inside jquery modal dialog box

When I click on the 'create new button', a modal window form pops up with a dropdown menu. The dropdown is supposed to be populated via ajax with the help of the populateUserData() function. Even though the ajax call seems to be successful, I am ...

Master the art of creating click events using only CSS

Is it possible to achieve this example using only CSS? If not, what would be the alternative solution? Any JSFiddle examples would be greatly appreciated! How can I also add slashes - should I use an image or can it be done with CSS? And what about the t ...

Getting user input with JQuery and dynamically updating CSS properties

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" /> <table> <tr> <th colspan="4">Control panel</th> </tr> <tr> <td> <!-- attempting to retrieve value from the input field ...

The top header must remain fixed at the top, while the bottom footer should stay fixed at the bottom of the page. The main div will then adjust to fill

My HTML code is structured using Bootstrap to create a grid layout. The goal is to have the NAV BAR and FOOTER contained within the left container, allowing the SIDEBAR on the right to display without overlapping. Here's an example image of what I&apo ...

Do designers often manually adjust elements using media queries when working with Bootstrap?

Is it common practice to directly invoke media queries in order to manually adjust the layout of elements when using Bootstrap? In other words, if I have a custom element that I need to display or position in a specific way, is it acceptable to call the m ...

The CSS styling for the <body> element is not rendering the expected results

website <!DOCTYPE html> <html> <head> <title>Time Tracker</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link ...