Take a look at this example: Here.
I'm currently attempting to eliminate a hover effect when clicked, and after researching, it seems that most people recommend using jquerys .removeClass() to accomplish this.
Unfortunately, I've tried assigning the class or ID to my selector, but nothing seems to be working.
What am I missing here?
Thank you in advance.
When dealing with the :hover selector as opposed to a class, removing it using .removeClass() in JavaScript will not be effective. The alternative is to either use JavaScript entirely or prevent the hover behavior by adding another CSS class, like demonstrated here:
http://jsfiddle.net/fc0y6dk3/1/
<script>
function unhover(){
$('.topmenu').addClass("nope");
}
</script>
CSS:
.topmenu:not(.nope):hover {
background: yellow;
}
:hover is not a type of class, but you can solve the issue by adding a second class and removing the first one based on your updated jsfiddle.
<div class="topmenu topmenu2">
<button type="button" style="position:absolute; left:200px; top:50px" onclick="unhover()">OK</button>
</div>
<script>
function unhover(){
$('.topmenu').removeClass("topmenu2");
}
</script>
.topmenu, .topmenu2{
width: 500px;
height:100px;
background: grey;
}
.topmenu2:hover{
background: yellow;
}
Hey there! I may be a bit delayed in providing the response, but here is the link you're looking for:
http://jsfiddle.net/Saiyam/fc0y6dk3/4/
Instead of using removeClass, consider utilizing toggleClass to dynamically add and remove classes with a simple click.
My issue is as follows: I currently have two circles stacked on top of each other, but I would like to position them side by side. Below is the HTML for the existing layout: <div class="col-lg-6"> <div class="page-scroll" style="text-align:c ...
There seems to be an issue with two divs stacking on top of each other, which is not the desired layout. This problem occurs when five div boxes are added. The goal is to have all divs in a single row, but it's unclear why this layout is not working ...
I am currently working on creating a chatbox for both mobile and desktop websites. However, I have encountered an obstacle in implementing a specific message reply feature similar to Skype and WhatsApp. In this feature, the user can click on the reply butt ...
I am having an issue with an AJAX request that is returning data in text format. The request queries a PHP page which responds with either Success or Failed. When I use console.log to check the response, it shows Success. However, when I try to compare it ...
I'm curious about improving website scroll and animation performance. Which option would be better for your mobile webapp or website: Using a repeating thin image or CSS3 gradient? or Utilizing a repeating image instead of box shadow with a borde ...
I created a jsp file that includes a tabbed panel using the Dojo framework. Here is the code snippet from the JSP - <div id="protoDevTDPRevLogTab"> <sx:tabbedpanel id="tabContainer" selectedTab="2" > <sx:div label="Prototype Dev ...
I need the ajax response to be formatted as comma separated values. This is what the ajax response looks like: { "data": [ { "id": "xxxxxa" }, { "id": "xxxxxxb" }, { "id": "xxxxc" }, { "id": "xxxxxd" } ] } The ...
Is there a way to create a table where the height remains constant regardless of the number of rows added? For example: https://i.sstatic.net/zJNqD.png Even if rows are added, I want the height to stay consistent. I cannot use percentage since the numb ...
I am facing an issue with my code. The problem arises when I utilize the each() function; it iterates from the first cell to the end of the row, fetching every value along the way. What I actually want is for it to retrieve the value from each row individu ...
Encountering Laravel 5.2 ErrorException in FormBuilder.php on line 1235 stating that the method 'style' does not exist. This error has me perplexed. I have already made updates to my composer.json file by adding "laravelcollective/html": "^5.2" ...
When working with a js file and html, I encountered an issue where one function works fine but another prompts an error in Chrome: Uncaught TypeError: specification_existing is not a function I'm puzzled as to why one function works while the othe ...
Implement a time input using ng-forms <input type="time" class="form-control" path="time" formControlName="time" [ngClass]="{'is-invalid': submitted && f.time.errors}" /> ...
Hey there, I have this little issue that's been bugging me. In my index page, I've included the header.php, followed by an Iframe. <body> <?php include 'header.html' ?> <div class="clear"></div> ...
As a beginner in CSS, I have a simple question that needs addressing. I am unsure which class to begin with for my task. The goal is to insert text (specifically, two digits) neatly inside toggle buttons (the slider that moves and appears white). I am u ...
I have a JavaScript chat application that is causing me some trouble. I recently implemented a feature to display user names on top of messages, and while it works well for the first message, I am struggling to hide the user's name when they send subs ...
I am struggling to figure out how to read a JSON payload in a Java RESTful webservice. Despite conducting extensive research, I have not been able to find a useful solution. Can anyone offer some assistance? JQUERY: $(function () { var arr = {"name": ...
When I apply an ellipsis to the text within a list element that has disc bullet points, it hides the bullet point itself. I discovered that applying overflow: hidden to the list will also hide the bullet point. Moving this rule to the anchor within the li ...
Appreciate the assistance in advance. I am currently working with a plugin that requires a JSON response to be formatted as an array instead of an object. Below is a snippet of the JSON response I am receiving: { "instruments": [ { ...
I am currently working on enhancing my website's navigation by creating a mega menu. However, I am facing issues with the organization of the divs containing the ul content. In the fiddle linked below, you can see that "Africa", "Asia", and "Oceania" ...
Can you help me figure out how to apply the "active" class to an option element instead of the select element in this code? This is what the HTML looks like: <select id="category" required > <option value="Cats" selected>Cats</option&g ...