SCSS - Hide div1 when div2 is hovered over

Question

SCSS - Hide div1 when div2 is hovered over

In an attempt to make a div disappear when hovering over another div using only CSS, I have set up two divs:

<div class="" id="target">I will disappear</div>
<div class="hover_box">Hover me</div>

Here is my SCSS code:

#target {
  background-color: blue;
  height: 100px;
  width: 100px;
}

.hover_box {
  background-color: red;
  height: 100px;
  width: 100px;

    &:hover #target{
      display: none !important;
      /* background-color: green !important; */
    }
}

Unfortunately, this setup does not seem to work as intended. You can view the issue in action here:

https://jsfiddle.net/ubLLga3q/3/

javascript jquery html css sass

Answer 1

Answer №1

Your current issue lies within the HTML markup. You are attempting to make #target disappear on hover, but you can only achieve this by targeting a sibling or child element. As it stands, #target is not a child of .hover_box.

<div class="box">
  Hover over me
   <div class="hover_box">

  </div>
</div>

.box {
  background-color: blue;
  height: 100px;
  width: 100px;
}

.hover_box {
  background-color: red;
  height: 100px;
  width: 100px;
}

.box:hover .hover_box {
  display: none;
}

https://jsfiddle.net/ubLLga3q/6/

Answer 2

Your current issue lies within the HTML markup. You are attempting to make #target disappear on hover, but you can only achieve this by targeting a sibling or child element. As it stands, #target is not a child of .hover_box.

<div class="box">
  Hover over me
   <div class="hover_box">

  </div>
</div>

.box {
  background-color: blue;
  height: 100px;
  width: 100px;
}

.hover_box {
  background-color: red;
  height: 100px;
  width: 100px;
}

.box:hover .hover_box {
  display: none;
}

https://jsfiddle.net/ubLLga3q/6/

SCSS - Hide div1 when div2 is hovered over

Answer №1

Similar questions

A guide to quickly obtaining the width and height of an element as it resizes in Vue.js

Angular 5 is not compatible with jQuery

Steps to retrieve the primary key associated with a duplicate entry error (1062) in MySQL using the Knex.js library

Searching through the Symfony2 database with the help of Select2 and Ajax

Error: The function onSelectChange is not defined in this.props

Encountering an "Unspecified Reference Error" while attempting to retrieve data from an API in your

Using a combination of a bootstrap class and a custom CSS class to enhance your website design

CSS: "Cutting-edge" design. In what way?

How to properly format JSON responses in Node.js or Express

Error in displaying image when lightboxv2.6 is clicked

When the page reloads, the firebase currentUser variable is found to be

What is the best way to eliminate tags within a tag using PHP?

How can Socket.io prevent other pages from receiving all messages?

Transforming a pseudo element from horizontal to vertical orientation

Component re-rendering and initializing useReducer

Tips on dynamically passing values according to media queries

You can activate Lightgallery just one time in VueJs

Building upon the preceding inquiry, a ReferenceError has occurred due to the object being undefined

The functionality of localStorage seems to be dysfunctional in Nuxt js when running in SSR mode

Verify the presence of a JSON object within the session storage using JavaScript