The CSS hover effect does not function when used within a bootstrap modal overlay

Currently, I am in the process of creating a modal view with the assistance of the Bootstrap framework. Within this setup, there are two buttons displayed on the screen. My objective is to implement a hover effect when the mouse pointer hovers over these buttons. Despite my efforts using CSS, the desired effect has not been achieved.

#yesbut,#nobut {
    width: auto;
    height: auto;
    display: inline-block;
    padding: 10px 35px;
    text-align: center;
    background: #2e6c96;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    border: 1px solid #2e6c96;
    outline: none;
text-transform: uppercase;
}

#yesbut :hover{
 background: #fff;
border: 1px solid #fff;
}
#nobut :hover{
 background: #fff;
    color: #2e6c96;
border: 1px solid #fff;
}
<div id="yesbut" >YES</div>
<div id="nobut">NO</div>

See the image description here

htmlcss

Answer №1

#yesbut:hover{
background-color: #ffff;
border-width: 1px;
}

Answer №2

The corrected selectors for your error are as follows:

#yesbut:hover{
    background-color: #ffffff;
    border: 1px solid #ffffff;
}

Make sure there is no space between #yesbut or #yesno and :hover.

If there is a space, it indicates that you are targeting elements within the specific element, like children of #yesbut.

Answer №3

To effectively target elements, it is crucial to eliminate any spaces within the code. Placing a space before a pseudo-class indicates that you are selecting a child of a specific element, such as #yesbut, rather than targeting the element itself.

#yesbut,#nobut {
    width: auto;
    height: auto;
    display: inline-block;
    padding: 10px 35px;
    text-align: center;
    background: #2e6c96;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    border: 1px solid #2e6c96;
    outline: none;
text-transform: uppercase;
}

#yesbut:hover{
 background: #fff;
border: 1px solid #fff;
}
#nobut:hover{
 background: #fff;
    color: #2e6c96;
border: 1px solid #fff;
}
<div id="yesbut" >YES</div>
<div id="nobut">NO</div>

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

What could be causing my select element to not display any options after being dynamically generated using JavaScript?

function createDropdown() { const selectElement = document.createElement('select'); selectElement.setAttribute('type', 'text') toolresult.appendChild(selectElement); const optionElement = document.createElement('o ...

javascripthtmlcss

Shuffle order of AngularJS ng-repeat array

I am struggling to create a basic grammar quiz where I need to randomly sort an array using ng-repeat. The goal is to display both correct and incorrect sentences in random order. Below you can find my code snippet: (function(angular) { 'use str ...

javascripthtmlangularjs

modify style when not valid and is touched

When I try to modify the style of an i tag based on the touched and invalid state of another field, only the input tag's style changes and not the i tag. Here's the CSS code I'm using: input.ng-touched.ng-invalid { border-color: red; } ...

htmlcssangularangular7

KnockoutJS encounters an error: Unable to handle binding

Here is the code snippet that I am working with: <script> var viewModel = {}; $.getJSON("URL", function (data) { viewModel = ko.mapping.fromJS(data); ko.applyBindings(viewModel); }); </script> This is how ...

javascripthtmljsondata-bindingknockout.js

Problem with Bootstrap Dropdown positioning on mobile devices

I have encountered a puzzling issue with our web application. To demonstrate the problem, I have simplified the page to its bare minimum. You can access it here: Everything seems to be working fine on desktop browsers. However, when I test the page on a m ...

htmltwitter-bootstrapbootstrap-4

How do I adjust the ul size to be proportionate to the header?

I have a list with corresponding hyperlinks in my code, and I am trying to make these elements the same size as the header. I attempted adding auto padding and height auto but it did not produce the desired result. Here is the HTML snippet: <header id ...

htmlcss

What is the best way to eliminate the blue-box-fill when buttons are clicked?

Check out this screen recorded gif on my device showcasing the blue-box-fill I'm referring to: https://i.stack.imgur.com/ajr2y.gif I attempted the following solution: * { user-select: none; -webkit-user-select: none; /* Safari */ -khtml-user-s ...

css

How to enable drag-and-drop functionality for an iframe?

I've successfully made a chat widget draggable using react-draggable. However, the chat widget is also consumed by an iframe created entirely with HTML. I need the iframe to be draggable as well, but react-draggable doesn't support this. Are ther ...

javascripthtmljqueryreactjsiframe

Is there a way to make Chrome ask to save a password within an HTML form?

I'm having trouble getting a basic email/password HTML form to prompt Chrome to save the password. Despite following examples, it's not working for me. Here is my code: <form name="loginForm" action=""> E-Mail:<br><input ...

html

Show various pieces of information in my input field

I'm working with an input field: <div class="search-field search-field-date search-field-calendar ui-datepicker-calendar columns small-3"> <input type="text" data-ng-model="goDate" placeholder="Departure Date" data-mtx-datepic ...

htmlcssangularjs

How can you ensure an image is centered properly when padding is applied?

Is there a way to center an image without affecting padding around it? Check out this sandbox for reference HTML <div class="imageParent"> <figure id='img-div'> <img class='image card' ...

htmlcss

How do I go about extracting and presenting the JSON data from the ESPN API?

In my current project, I am trying to utilize the jQuery library to work with API JSON data. Even though I am experienced in parsing JSON in PHP, I want to explore doing it with jQuery this time around. The goal is to extract information about each of the ...

javascriptjqueryhtmljson

Locate the checkbox label using CSS

Is there a way to replace the standard checkboxes with font-awesome icons without modifying the generated HTML or using jQuery? EDIT: The code includes JavaScript that prevents me from making changes. Also, note that the label text class can be -1 or -2 a ...

htmlcsscheckboxcss-selectors

I am in search of a regular expression to validate a Jordanian phone number, whether it includes the country code or not

Looking for a regex pattern that can validate phone numbers beginning with either 0096279, 0096278, 0096277, or 079, 078, 077. ...

javascripthtml

Attempting to remove an attribute or property in JavaScript will not yield the desired result

When I try to close the menu after opening it, the inline style won't get removed despite trying different methods. The CSS only has text properties for alignment and the class can-transform contains a media query. That's all the information I h ...

javascriptcssfunctiontoggleinline-styles

Using CSS, I have rearranged the content of a single row (tr) in an HTML table into two separate rows

I am currently facing a challenge with rearranging my table due to width constraints. My goal is to apply Jquery functions to the table in order to extract all parameters related to a product, but I want to avoid having nested tr elements or splitting para ...

jqueryhtmlcss

The functionality of two-way binding in a distinct controller is not functioning properly when integrated with angular-wizard

I've been working hard to integrate this amazing wizard controller into my project: However, I've hit a roadblock with two-way binding not functioning as expected outside of the <section> attribute: http://plnkr.co/edit/N2lFrBRmRqPkHhUBfn ...

javascripthtmlangularjs

What is the best way for me to make my JavaScript function return images?

I am working on a function that is supposed to display images based on whether a password check is correct or not. The image should show a cross if the passwords don't match and a tick if they do. Here is the code I have so far: <script type="text ...

javascripthtmlimage

Create individual CSS and JavaScript files

provides a useful example that I am interested in. <style> .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, ...

javascripthtml

An interesting approach to utilizing toggle functionality in JQuery is by incorporating a feature that automatically closes the div when

Currently, I am utilizing JQuery's toggle function to slide a ul li element. However, my desired functionality is for the div to close if someone clicks outside of it (anywhere on the page) while it is in the toggle Down condition. Below, you'll ...

javascriptjqueryhtmlcss