The Bootstrap Library reference causes the anchor hover function to malfunction

Feeling frustrated after encountering an issue where the Bootstrap button class interferes with the hover function in standard CSS.

Decided to create a custom solution by adding a grey box next to the button to display hover information instead of using tooltips. Here's the code:

HTML

 <a class="btn btn-danger disabled" disabled="disabled" href="" id="statement-delete" onclick="return false;">Delete
     <span id="delete-info"></span>
</a>

CSS

#statement-delete:hover #delete-info {
    display: block;
}

#delete-info {
    display: none;
    background: #C8C8C8;
    margin-left: 0px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;
}

Originally thought there was an error in the code, but after testing on JSFiddle without Bootstrap, it worked perfectly. However, upon adding Bootstrap references, the hover function failed.

Here's the fiddle for reference: http://jsfiddle.net/ga82Lbm5/1/

Upon removing the Bootstrap reference, the hover worked as expected.

Is it feasible to enable the hover function on a Bootstrap button, or is utilizing custom jQuery the only solution?

htmlcsstwitter-bootstrap

Answer №1

When using Bootstrap, the style pointer-events:none is applied to disabled elements to disable hover functionality. To reverse this, you can override the rule with the following code:

a.btn.disabled {
    pointer-events: auto;
}

Check out this jsFiddle demo for reference

Answer №2

It is advisable to eliminate the attribute disabled="disabled" as you are interested in the hover functionality. Logically, for the hover feature to function properly, the element should be "enabled". Similarly, you may also want to remove the CSS class disabled for the same purpose.

An important point to note is that Bootstrap includes the property pointer-events: none; in the class disabled. The purpose of this property, as defined on Mozilla Developer Network (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events), is:

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

The solution lies in neutralizing the impact of this attribute. Hence, by eliminating the mentioned properties, the functionality should work as intended. Refer to the code snippet below:

#statement-delete:hover #delete-info {
    display: block;
}

#delete-info {
    display: none;
    background: #C8C8C8;
    margin-left: 0px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;
    top: 48px;
    left: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
 <a class="btn btn-danger" href="" id="statement-delete" onclick="return false;">Delete<span id="delete-info"></span></a>

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

"Utilize Bootstrap's responsive 3-column grid layout for a sleek design, complete with hidden col-12 elements below each grid

Looking to create a 100% width column below an element within a column of a bootstrap grid. For better understanding, here is what I'm aiming for: https://i.stack.imgur.com/pl1Fi.png On selecting one of the images (from 1 to x), a hidden div with di ...

htmltwitter-bootstraptwitter-bootstrap-3grid

Transparent Box for Images - Overlay Effect

Is it possible to add text on top of an image with a background, such as the example shown below? <div id="slider" class="nivoSlider"> <img src="images/slide1.jpg"/> </div> ...

htmlcssimagetextoverlay

Getting JSON with duplicate keys in JavaScript can be achieved by parsing the data using a custom function

I am attempting to retrieve JSON from a URL, but I have encountered an issue where the response object is removing duplicate keys. Is there a way to fetch the JSON without eliminating these duplicates? Below is my JavaScript code: $('document'). ...

javascriptjqueryhtmljson

CSS not being properly rendered on newly inserted row within table via jQuery

I'm currently working on a table that allows users to select rows, and I've implemented some CSS to highlight the selected row. The issue arises when new rows are added to the table as they do not get highlighted when selected. HTML Portion: &l ...

javascriptjqueryhtmlcss

Tips for ensuring that hover:after contents do not impact the positioning of the next element

I have created a photo list section on my webpage. <div id="main_post_photo"> <% for(var q=0;q<resolve.length;q++){ if(resolve[q].images.length>=1){%> <a href='/post/<%= resolve[q]._ ...

htmlcss

The horizontal layout for the Bootstrap 3 sub menu is not displaying beneath the dropdown as expected

Check out my testing site here. I envision the navigation of my website to look like this in the near future, albeit at a lower resolution. While experimenting with the inspector tool, I noticed that changing the display property to inline-block causes t ...

csswordpresstwitter-bootstraptwitter-bootstrap-3submenu

How can I locate the ID of the HTML input element with jQuery?

I am trying to create a page with a button that looks like this: <input type="button" id="btnAddBusinessUnit" value="Add Business Unit" class="clsAddBusinessUnit" alt="testBtn" /> When the button is clicked, I want to display the id 'btnAddBus ...

javascriptjqueryasp.nethtml

How to Place a Button Halfway Out of an Angular 5 Material Dialog

Is there a way to place a close button on the top right corner of a dialog box, partially inside and outside the dialog like shown in this image: I attempted using absolute positioning to achieve this, but that solution is not ideal. I want to position t ...

cssangularangular-material

Steps for deactivating the submit button once confirming the presence of the username and email

When using AJAX to verify the existence of an email or username in the database, I want to deactivate the submit button if either one (or both) already exist. Currently, I have successfully changed the input border color but I am facing a challenge with t ...

javascriptjqueryhtmlajax

Base64 image failing to display in Internet Explorer

Is there a way to efficiently handle the base 64 form of an image in different browsers? The code I have achieves this as shown below: import base64 import requests img=requests.get('https://example.com/hello.jpg') base=base64.b64encode(img.cont ...

pythonhtmlimageinternet-explorerbase64

Extracting information from several span elements within the main span class using BeautifulSoup

I'm currently attempting to extract data from the following HTML code: <span class="double-line-ellipsis"> <span> ₹ 2800 for 2 (approx) </span> <span> | </span> <a data-w-onclick="stopClickPropagation|w1-re ...

pythonhtmlweb-scrapingbeautifulsoup

Is it possible to modify the concealed global attribute using CSS?

Imagine this scenario: <div hidden>blah blah blah</div> If I hide the <div> element like that, can CSS be used to make it visible again? Alternatively, is there an HTML-only method to hide a <div> that can later be reversed with ...

htmlcssshow-hide

Creating dynamic pages using user input in Node and Express

Currently, I am facing a challenge in rendering text using node/express. Within my project setup, there is an HTML file containing a form. The file named search.ejs looks like this: $(document).ready(function(){ var userInput; $("#submit-button-i ...

javascripthtmlnode.jsexpress

Contrast between the visibility settings of display none and display block

Can you explain the contrast between a control's style being set to display: none versus display: block? ...

htmlcssstyling

Borders in my CSS/HTML table design

Hey, I'm currently facing an issue with my class project. I've created a table with a series of images to form a background image. However, there are borders on the table that I need to adjust. Here is the current look: I am trying to have a sq ...

htmlcss

How come justify-content-center aligns the content to the center of a row, but not a container?

Why is the content centered in this code snippet? <div class="row justify-content-center"> <h2>Some heading</h2><br> </div> And why isn't it centered in this one? <div class="container justify-conten ...

twitter-bootstrapbootstrap-4

How can we align the Recaptcha and Send button with the text box in a DIV using CSS exclusively?

Struggling to line up my send button and recaptcha with the end of the text box in a contact form in a responsive manner. I've spent days trying to make it work without success. Check out my jsfiddle here: Example Here's the current CSS: /*cust ...

htmlcss

Is it HTML True or False in the editor?

For the HTML template I'm working on, I want to implement a feature where users can toggle tags on and off easily. My idea is to make it as simple as setting a value to "true" or "false." Is there a way to achieve this within a single HTML file? ...

html

The mystery of the unassigned value in $(this).data(value) when using the jQuery click() method

In my Rails 5 application, I am working on creating a dynamic menu that will guide users to different parts of the site based on their location. The idea is that when they click on a specific menu item from the home page, a modal will appear allowing them ...

javascriptjqueryhtml

Valid ways to ensure that a CSS image expands outside the boundaries of the containing div

I have inserted an image using the following CSS code: .imgtemp { float:right; top:0px; left:0px; overflow:visible; width:100%; } Although I have added the div tag to display it on the page, ...

htmlcss