Is there a way to prevent hover effects on the outer div when hovering over the inner div?

I am facing an issue with disabling hover effects on an outer div when hovering over an inner button. I have tried various methods but haven't been successful in achieving the desired outcome.

.container {
  background-color: #e6e6e6;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  align-items: center;
  border: 1px solid black;
}

.container:hover {
  border: 1px solid #99ffcf;
  background-color: #bababa;
}

button {
  padding: 10px;
  margin-top: 170px;
}

button:hover {
  cursor: pointer;
}
<div class="container">
  <button type="button">Click Me!</button>
</div>

Check out the Codepen Demo: https://codepen.io/sherbethead/pen/LYMboRG

htmlcsshover

Answer №1

If you want to achieve a CSS-only solution, you can replace the container:hover with the following code snippet:

.container:has(:not(button:hover)):hover{
  border: 1px solid #99ffcf;
  background-color: #bababa;
}

Keep in mind that :has may not be supported universally by all browsers, so it's advisable to verify its compatibility with the specific browsers you are targeting on Can I use.

.container {
  background-color: #e6e6e6;
  width: 400px;
  height: 400px;
  margin:0 auto;
  position: relative;
  text-align: center;
  align-items: center;
  border: 1px solid black;
}

.container:has(:not(button:hover)):hover{
  border: 1px solid #99ffcf;
  background-color: #bababa;
}

button{
  padding: 10px;
  margin-top: 170px;
}

button:hover{
  cursor: pointer;
}
<div class="container">
  <button type="button">Click Me!</button>
</div>

Answer №2

To implement this functionality, simply include the following CSS code:

.container {
  background-color: #e6e6e6;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  align-items: center;
  border: 1px solid black;
  pointer-events: none;
}

.container:hover {
  border: 1px solid #99ffcf;
  background-color: #bababa;
}

button {
  padding: 10px;
  margin-top: 170px;
  pointer-events: auto;
}

button:hover {
  cursor: pointer;
}
<div class="container">
  <button type="button">Click Me!</button>
</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

Adjust the alignment of cells within a table

Excuse my lack of knowledge, but CSS is still new to me. I'm attempting to align two elements next to each other using display: table. However, the element on the right seems to be lower than the one on the left, and I can't figure out why. . ...

cssalignment

Why does Asp.net Webform load twice every time I click on the form link?

In my asp.net webform project, I am encountering an issue where the page is running twice when clicked. The problem arises when calling two functions (Fill DropDowns) on the Page_Load Event. During debugging, it was observed that the control enters the Pa ...

javascriptc#htmlasp.netwebforms

How to implement an 8-column layout within a 12-grid bootstrap framework?

Hey guys, so I've been trying to recreate this page with Bootstrap and it's all going smoothly except for this one part. Here is the link I'm referring to: I have 2 questions: Which HTML element should I use for these lines? Any idea on h ...

htmlcsstwitter-bootstrap

Tips for customizing a link element that routes to a React component

App.js: import './App.css'; import logo from './images/logo.png'; import Home from './components/Home'; import About from './components/About'; import Calculators from './components/Calculators'; import Cla ...

htmlcssreactjsreact-routerreact-router-dom

Altering the submit button's value following the submission of a form

My goal is to create a form with a submit button that, when clicked, will insert the value of the button into a database and change the text on the button to inserted. If the insertion violates any constraints, then the text on the button should be changed ...

phphtmlajax

There was an issue with the SidebarController function being undefined, as it was expected to be a function

I'm encountering two issues with my demo: Error: [ng:areq] Argument 'SidebarController' is not a function, received undefined http://errors.angularjs.org/1.2.26/ng/areq?p0=SidebarController&p1=not%20aNaNunction%2C%20got%20undefined ...

phpjqueryhtmlcssangularjs

AngularJS: Utilizing UI Bootstrap Popover with the Placement Set to 'bottom-right'

I am working with UI Bootstrap and AngularJS, attempting to customize a popover to have the 'bottom-right' placement instead of the default 'bottom' or 'right'. The desired functionality is illustrated in the image below. htt ...

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap

What is the proper way to eliminate the port from a URL so that the images sourced from the XAMPP database can function correctly?

I am a beginner in Angular and I am facing an issue with Angular and XAMPP. I am attempting to load images from mySQL database where I stored their destinations. The problem is that Angular is trying to access that destination through this link: This is m ...

htmlangularxampp

The Angular multi select tree feature seems to be malfunctioning

I recently incorporated a plugin called angular-multi-select-tree from GitHub into my project. Here is how I added it: First, I installed it via bower using the command bower install angular-multi-select-tree --save. This updated the bower.json file to i ...

javascriptjquerycssangularjsbower

Showing information in a table on a webpage using JavaScript and HTML

After running a console log, I am presented with the following data: 0: {smname: "thor", sim: "9976680249", pondo: "10"} 1: {smname: "asd", sim: "9999999999", pondo: "0"} 2: {smname: "asd", sim: "4444444444", pondo: "0"} 3: {smname: "bcvb", sim: "78678967 ...

javascripthtmlhtml-table

Could someone explain how CSRF protection works with empty Flask-WTForms forms?

I have a query regarding csrf Cross-site Request Forgery Attacks in flask. After finding a helpful youtube video, here is what I learned: There was an incident where an email was changed by someone who was logged in through a specific path that allows up ...

htmlflaskflask-wtforms

Tips for retrieving the xpath of elements within a div using python selenium

<div class="col-md-6 profile-card_col"> <span class="label">Company Name :</span> <p class="value">Aspad Foolad Asia</p> </div> For a while now, I've been trying to troublesho ...

pythonhtmlselenium

Is there a way to generate unique authentication numbers daily without the need to manually adjust any code

I am building a web application for commuters using vuejs and firebase. My goal is to implement the following feature: The employer provides the employee with a unique authentication code daily, which the employee (user) must enter when clicking the "go t ...

androidhtmlfirebaseapivue.js

Looping in jQuery: Tips for Improving Performance

In my popup window, I have a JavaScript function that utilizes jQuery to retrieve checked checkboxes from the parent window. It then uses jQuery again to access associated data from hidden fields in the parent window for each checkbox. var chked = $(&apos ...

javascriptjqueryhtmlasp.net

Attempting to display a brief description when hovering over a particular project image

My goal on is to display a description when hovering over a portfolio image by setting the opacity to 1. However, this functionality seems to not be working. .description { display: block; opacity: 0; text-align: left; height: 130px; padding- ...

htmlcss

The page refreshes when the anchor element is clicked

Currently, I am working on enhancing a web application that is built on the foundation of traditional aspx (asp.net) web forms with elements of Angular 6 incorporated into it. My current assignment involves resolving a bug that triggers a page refresh whe ...

javascripthtmlasp.netangular

Develop a dynamic progress bar using jQuery

I am having trouble creating a percentage bar using jquery and css. The code I have written is not working as expected, particularly the use of jquery css({}). Here is the code snippet: *'width' : width - seems to be causing issues for me / ...

htmljquerycss

Using values from a designated line within the textarea to successfully submit a GET form

How can I extract values from a specific line in a TextArea and use them to submit a form? <!DOCTYPE html> <html> <body> <input type='button' value='submit' onclick='document.getElementById("submit-line-3") . ...

javascriptjqueryhtmlajax

Analyzing Date Strings Retrieved From a MySql Database

In my MySQL database, I have a relationship that stores dates as varchar along with other attributes. This is how it looks: Answers answerId answer questionId date I am working on a web application where the user can select a &apo ...

phpmysqlhtmlsqldatabase

Checkbox offering a tri-state option

Seeking help on creating a checkbox with three states. I have implemented a method to toggle between these states upon clicking. However, the issue is that this method is only triggered after the HTML changes. As a result, the checkbox's navigation be ...

htmlangulartypescriptangular2-forms