using sass to nest multiple classes

In an attempt to utilize nested classes with Sass, I am working on a styling code that displays a button on hover. Here is the structure of my SCSS:

.item{
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green;

   .Button{
      visibility: hidden;

        &:hover{
          visibility: visible;
        }
    }
}

After compilation, this code translates to the following CSS:

.item {
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green; }

  .item .Button {
    visibility: hidden; }

    .item .Button:hover {
      visibility: visible; }

Despite the implementation, it seems that the hover effect is not functioning as intended.

csssass

Answer №1

Instead of initially hiding the button, you can make it visible on hover by using the item:hover property.

Here is how your SCSS code should be structured:

.item {
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green;

  .Button {
    visibility: hidden;
  }

  &:hover .Button {
    visibility: visible;
  }
}


.item {
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green; 
}

.item .Button {
  visibility: hidden; 
}

.item:hover .Button {
  visibility: visible; 
}
<div class="item">
  Hover over Item Class
  <button class="Button">Click here</button>
</div>

Answer №2

Give this a shot:

.element{
  border-bottom: 1px dashed #999;
  text-indent: 30px;
  height: 80%;
  padding: 3px;
  text-transform: uppercase;
  color: blue;

  &:hover {
    .button {
      visibility: visible;
    }
  }
  .button{
    visibility: hidden;
  }
}

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

Tips for maintaining consistent content length of nested divs as one div's content grows

I am looking for a solution to ensure that when the map is running on my MUI card, some cards with more text content will increase in length while maintaining equal text alignment. I have attached a screenshot of my actual app and a CodeSandbox example for ...

htmlcssmaterial-ui

There is a collision of boxes occurring within the CSS

Help Needed: Overlapping Boxes in Responsive Design I am facing a problem with my CSS where the boxes on my website are overlapping when I shrink the browser window. The issue occurs as I resize the window, causing the boxes to overlap more and more. I ...

htmlcsscss-position

Applying CSS classes to my div element

Check out the following code snippet: <div class="page-template-default logged-in"></div> I am trying to apply a class like this: .page-template-default .logged-in { } However, it doesn't seem to work. Any idea why? ...

css

Deselect all child elements when the parent checkbox is not selected

Creating a page that features multiple checkboxes, some nested and others not. When a particular checkbox is selected, additional options will be displayed underneath it for selection; if unchecked, the child boxes will be hidden. Currently, this functiona ...

jqueryhtmlcss

The code encountered an error because it was unable to access the property 'style' of an undefined element on line 13 of the script

Why is it not recognizing styles and showing an error? All paths seem correct, styles and scripts are connected, but it's either not reading them at all (styles) or displaying an error. Here is the html, javascript, css code. How can this error be fix ...

javascripthtmlcss

What steps can I take to ensure my header image adjusts properly for different screen sizes?

Currently, I am working on creating a website for a friend using an exquisite premium Wordpress theme. Despite having paid for the theme, the designer is unwilling to assist with customization. You can view the site in progress at www.zerocarbonfood.co.uk ...

csswordpressresponsive-design

Changing date format in Mui DatePicker

I need some assistance with customizing the mui DatePicker. Specifically, I would like to set the date format to display as Day, DD Month. For example: Monday, 10 September Below is the code snippet I am currently working with: <LocalizationProvider d ...

htmlcssreactjsdatematerial-ui

The image is being loaded onto the canvas and is being resized

Currently, I am facing an issue with loading images into a canvas element as the image seems to be scaled in some way. To provide some context, I have multiple canvases on my webpage and I want to load images into them. Since the dimensions of the canvas ...

javascriptcsscanvasdrawimage

The footer is refusing to show up at the bottom of the page

Why is my footer floating in the middle of the page? It's driving me crazy. I really hope it's a quick fix. I've searched online and all the solutions point to having a fixed footer, but I don't want that because it looks bad on smaller ...

htmlcssfooter

Switch the text style when hovering, then switch it back upon second hovering

Searching for a method to modify the font of individual letters when hovering over them. The goal is for the letters to revert back to their original font after a second hover (not on the first hover-off). Any assistance would be greatly valued! ...

javascriptcssfontsmouseover

Display a text over a full-screen HTML5 video

Is there a way to display text on a fullscreen video in HTML? I have tried using absolute positioning for the text and relative/fixed/none positioning for the video, but it does not work when the video is in fullscreen mode. I also attempted to call the ...

javascripthtmlcssvideo

Exclude the CSS file from all elements except for the ones that are being appended to a specific div

Imagine you have a document with a CSS file that applies to all elements on the page. Is there a way to selectively remove or add styles from this file so they only affect a specific div and not the entire document? ...

javascriptjquerycss

Use either Jquery or CSS3 to hide a div if one of its inner divs is empty

I have multiple data sets to display in divs with the same class name. Each div contains two inner divs. <div class="div1"> <div class="div2">Abc</div> <div class="div3"><?php echo $row['SOME VALUE']; ?>< ...

javascriptphpjqueryhtmlcss

Grid numbering with CSS in jQuery mobile design

Looking to create a numbered grid where the user inputs a number and the grid is generated. I am considering using CSS, HTML, or Jquery Mobile for an iPad project. I'm unsure of the best approach at the moment. I would like the grid and numbers to aut ...

csshtmljquery-mobilegrid

Utilizing jQuery to seamlessly animate decimal values

Currently facing a challenge while trying to animate a number from 0 to 36.6. The issue is that the end value gets rounded up to 37 instead of displaying as 36.6, which you can observe in this fiddle: http://jsfiddle.net/neal_fletcher/0f3hxej8/ Required ...

javascriptjqueryhtmlcssanimation

Issues with the loading of CSS in Wordpress

I transferred the project from the server to my personal computer (localhost). However, whenever I make changes to the css file, these modifications do not appear on the website when viewed locally. After attempting to switch browsers and clear the browse ...

htmlcsswordpress

Having difficulty positioning content inside a div element

I am working with a set of three divs, each containing a .header class and a .content class. While I have managed to align the .header class correctly, I am facing an issue with aligning the .content class below the header with 10-15px padding on all sides ...

htmlcss

Load CSS stylesheet depending on Internet Explorer document mode

As I work on my website, I am facing the challenge of incorporating different versions of my style sheet based on the browser's document mode, not the browser mode. For instance, if the documentmode = ie8, I may need to load main_ie8.css, whereas for ...

javascripthtmlcssinternet-explorerinternet-explorer-9

Press the Instagram Follow Buttons by utilizing Selenium with Java

click here for image description Hello, I am currently working on automating the process of clicking follow buttons using Java. However, I'm encountering difficulties when trying to use JavascriptExecutor within a for loop. Below is the code snippet ...

javacssseleniumxpath

blurred image effect on bootstrap card hover

My attempt to create a blurred image effect on a bootstrap card hover is not working as expected. The blur effect works fine without the hover. Here is the code I have been using: .card-img { transition: all 1s ease; -webkit-filter: blur(0px); ...

htmlcssbootstrap-4