Change the color of a div by hovering over the text using CSS

Having some difficulty with changing the background color of a div when text is hovered over.

The setup involves using absolute positioning for the div.book element, and the text is positioned absolutely on top of it with the text having a higher z-index (3) than the div (2).

When hovering over the div, the entire background changes. However, most of the div is covered by the text, so no change is visible. Attempted solution:

h1:hover + div.book {
      background-color: rgba(333, 33, 33, 1);
    }

    .book {
      height: 50px;
    }
<h1>Book</h1> 
<div class="book"></div>

Unfortunately, unable to make it work. Any suggestions?

Thanks for your help!

htmlcsshover

Answer №1

Position the h1 element inside the <div></div>. These two elements will overlap each other once placed together. Adjust the width of .notebook. Lastly, make the text color transparent to hide any visible letters.

h1:hover {
  background: blue;
  color: rgba(0, 0, 0, 0);
}

.notebook {
  height: 60px;
  width: 250px; 
}
<div class="notebook">
  <h1>Notebook</h1> 
</div>

Answer №2

h1:hover + div.book {
  background-color: rgba(333, 33, 33, 1);
}

.book{ position: absolute;    z-index: 2; background-color:rgba(333,33,33, 0.6);width: 230px; height: 60px; border-radius:40px 40px 40px 40px;-moz-border-radius:40px 40px 40px 40px;-webkit-border-radius:40px 40px 40px 40px; border:1px solid #999;}
div.book:hover{background-color:rgba(333,33,33, 1);}
h1 {font-family: 'tahoma', cursive; color:#FFF;font-size:48px; text-shadow:3px 3px #000; position:absolute; z-index:3;}
<div class="welcome">
           <center><h1>Book</h1></center>
           <div class="book">
           
         </div>
</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 is the best way to position images and URLs in div elements using CSS?

Currently, I am on a journey to become a Front End Developer through Udacity. As part of my learning process, I have a project that needs to be submitted. Unfortunately, I encountered some issues that I couldn't resolve on my own. Specifically, I&apos ...

htmlcss

I'm looking for a way to conceal the final node in a tree structure using CSS

I have a tree structure created using html and css. I am trying to hide the last node in the tree using the following css code: div ul li ul li ul li ul.treeview{ display: none; } However, it doesn't seem to be working. Can anyone spot what ...

htmlcss

An ordered list placed within a div container in an HTML document

When I tried to format the ordered list with sub-items, I encountered an issue. There is a nested <ol> inside a <div>, but the numbering seems to be incorrect. Can you help me understand why? OL { counter-reset: item; padding-left: 10px; ...

htmlcsshtml-lists

What are the best techniques for displaying high-resolution images on mobile devices and lower-resolution images on desktop computers?

I implemented a typical bootstrap grid to display a row of images, with 4 images in desktop view and 1 image in mobile view. Here is what it looked like: <div class="row"> <div class="col-md-3 col-sm-12"> <img ...

htmlcssimagetwitter-bootstrapbootstrap-4

Unleash the Power of Animating Your Active Tabs

Is there a way to create animated tabs that slide in when clicked? I've experimented with using transition code but haven't quite achieved the desired effect yet. This is what I currently have: [data-tab-info] { display: non ...

javascripthtmlcss

Utilize Bootstrap's form-inline feature to arrange fields side by side in one neat

I am looking to customize my sign-in form layout by displaying the fields in a row next to each other rather than under each other. header: Update: I have successfully implemented this code <header class="navbar navbar-fixed-top navbar-inverse"> & ...

cssruby-on-railstwitter-bootstrap

Troubleshooting: Resolving issues with Bootstrap path in subfolders on your website

As a beginner using bootstrap 3, my goal was to create a header that I could easily call on any new page I create. However, I encountered an issue when I tried to place the code from the original file into a new folder with an index.php file. Here is an i ...

javascripthtmljquerybootstrap-4hyperlink

Is it possible to leverage Chrome for troubleshooting the reason behind a failure to load a Truetype font?

For my website, I am currently facing a problem with loading a ttf font. The error log only provides a generic message stating that the font failed to load, without any specific details regarding the cause. Interestingly, the font works perfectly fine on m ...

html

Assistance needed in Android Studio for incorporating a button using a Style Sheet (CSS)

Hey there! I'm just starting out with Android programming and could use some guidance. Can someone assist me in creating three simple buttons for my app? The buttons should be colored green, blue, and red, with a thin glowing outline around them. If ...

androidcssbutton

What is the syntax for creating a temporary variable within an Angular HTML component?

Can someone help me figure out how to call a function within a loop? Is there a way to store the return value of the function as a temporary variable? I want to use this return value for display purposes. Here is an example of what I am trying to achiev ...

htmlangulartypescriptangular-componentstypescript2.0

I'm looking to establish a cross-domain call in Tampermonkey in order to retrieve the contents of a div element. Can

After spending a few days tinkering with this, I have yet to make progress in successfully extracting data using a tampermonkey script. The closest I came was when I used this code http://jsfiddle.net/peterbenoit/N7avm/, which loaded the webpage/data succe ...

javascriptjqueryhtmlcross-domaintampermonkey

How can you use HTML, CSS, and JavaScript to group objects with one color and then change the color of one specific object?

I have a set of 6 labels that act as buttons. When one is clicked, it changes from white to blue. If another label is clicked, the previously blue label turns white and the newly clicked one turns blue. Currently, the code below sets all labels to white b ...

javascripthtmlcss

Challenges with formatting the <legend> tag and grid setup in bootstrap 4

My intention was for it to be displayed like this: But unfortunately, it is appearing like this instead: You can see that the word "fruit" is misaligned. I am currently using Bootstrap 4 alpha v6. Here is the code snippet: <fieldset class="form- ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-3

What is the best way to center a blog title on the screen?

Being a beginner in the world of blogging, I am looking to make some changes to my blog layout. Currently, my blog title is situated at the top-left corner but I would like it to be positioned in the middle of the screen with the description below the imag ...

htmlcssblogsbloggertitle

Why does the javascript code in AngularJS2 fire too early and appear to not be functioning properly?

I am facing an issue with my JavaScript script. Even though I have experience in programming with JavaScript before, this problem seems to be new. I am currently working on a website using Angular and JavaScript, but it's not functioning properly. Fir ...

javascriptangularjshtmlcss

Using Angular 4, you can dynamically insert values into an inline style through interpolation

I am currently teaching myself Angular 4 and have a question regarding the following code snippet: <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria- valuemin="0" aria-valuemax="100" style="width {{ it ...

htmlcssangularbootstrap-4

Design a dynamic div element that gracefully transitions in and out from the edge of the screen

Currently, I am in the process of developing a simple clickdummy for an application layout. The layout includes a details view on the right side that should only be visible after clicking a button. I am struggling to figure out how to make this div move us ...

javascriptjqueryhtmlcss

Aligning a set of list items horizontally within an unordered list is a great way to maintain a clean

I'm struggling with centering the alignment of li elements within a ul. Below is the excerpt from my code: ul.nav { width: 1000px; margin: 0 auto; list-style-type: none; } .nav li { float: left; width: 300px; } #government { clear: left ...

css

What is the best way to format the incoming data to display as HTML code?

My textarea has a v-model called content where input text is assigned to content.description. Now, I need to transfer this information to another element, specifically a div. The challenge lies in the fact that if my textarea includes HTML code, I want it ...

javascripthtmlvue.js

What is the reason this straightforward regex functions perfectly in all cases, except for when applied to the html5

This particular HTML input turns red to signify that the pattern has not matched when the value in the input field is "1". var newInput = document.createElement ('input'); newInput.pattern = '^\d+\.?\d*$'; document.getEl ...

javascripthtml