While browsing in Firefox and moving the cursor over a sub element

Question

While browsing in Firefox and moving the cursor over a sub element

While hovering over a child element in Firefox using the rule

.parent:hover > .child { /*style*/ }

, the child element is considered separate from the parent element and does not receive styling. For example, in Firefox when you hover over the button, only the child element is affected, and not the div when it is hovered.

In Chrome, however, hovering over both the parent and child will affect the child. This behavior is useful for my current project, so I am wondering if there is a way to achieve the same effect in Firefox?

button {
  position: relative;
}
button:hover > div {
  background-color: #67BDFF;
}
button:hover > div:before {
  content: "SMURF!";
  position: absolute;
  font-weight: bolder;
  font-size: 20px;
  top: 10px;
}
button > div {
  position: absolute;
  top: 18px;
  left: 0;
  padding: 40px;
}

<button>
  hover over me and my child will turn smurf
  <div>
    i'll remain smurf if you over over me cus am part of my parent, but not in firefox
  </div>
</button>

html css google-chrome firefox

Answer 1

Answer №1

<button> elements have restrictions on what they can contain, as explained here. Technically, a <div> should not be nested inside a <button>, resulting in non-compliant HTML that may display differently across browsers.

To achieve a similar effect in multiple browsers, you can follow this approach:

button {
  width: 300px;
}
button + div {
  padding: 40px;
  position: relative;
  width: 220px;
}
button:hover + div,
button + div:hover {
  background-color: #67BDFF;
}
button:hover + div:before,
button + div:hover:before {
  content: "SMURF!";
  position: absolute;
  font-weight: bolder;
  font-size: 20px;
  top: 10px;
}

<button>
  hover over me and my child will turn smurf
</button>

<div>
  i'll remain smurf if you over over me cus am part of my parent, but not in firefox
</div>

Answer 2

<button> elements have restrictions on what they can contain, as explained here. Technically, a <div> should not be nested inside a <button>, resulting in non-compliant HTML that may display differently across browsers.

To achieve a similar effect in multiple browsers, you can follow this approach:

button {
  width: 300px;
}
button + div {
  padding: 40px;
  position: relative;
  width: 220px;
}
button:hover + div,
button + div:hover {
  background-color: #67BDFF;
}
button:hover + div:before,
button + div:hover:before {
  content: "SMURF!";
  position: absolute;
  font-weight: bolder;
  font-size: 20px;
  top: 10px;
}

<button>
  hover over me and my child will turn smurf
</button>

<div>
  i'll remain smurf if you over over me cus am part of my parent, but not in firefox
</div>

While browsing in Firefox and moving the cursor over a sub element

Answer №1

Similar questions

"Excessive overflow results in the displacement of the following block

Issue: Inability to scroll on div overflow section

Is it possible for me to insert a hyperlink that will show a PDF in a web browser without triggering a download?

Completes a form on a separate website which then populates information onto a different website

Customize the Grid Offset in CSS like BootstrapCSS Grid Offset

Creating a fantastic Image Gallery in JavaScript

The division element shifts to the left upon invoking the slideUp() function

Concealing the primary div within a Vue child component

I'm having an issue where my footer is getting cut off when I resize the browser and start side scrolling. Can

The z-index property does not seem to function properly when used in conjunction

Combining Django and chartjs to create stacked multiple charts

Obtaining Values from Identical jQuery Buttons with the Same Class名称

Creating a dynamic className string in JavaScript with React

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

In a carousel slider, the height and width of divs are not set to specific dimensions

Create text that remains hidden behind an image while ensuring the content stays fully

What is the best way to loop through an array and apply classes to each element separately?

Understanding the user's preference for text alignment and managing how the text is displayed in a text area (or text field) within a ReactJS application

Is there a way to extract all the `<select>` elements from a table and store them in an array?

Achieving the perfect overlay and centered image effect using CSS