I am having trouble with my :hover selector being interrupted by text, what steps should I take to resolve this

My issue revolves around an image with a hover effect that changes the box shadow color. However, there is text on the image that also changes when clicked, creating a problem where the area occupied by the text prevents the box shadow from displaying properly. This means the shadow only works when hovering over a part of the image not covered by text. Is there a way to resolve this issue? Additionally, I just realized that this may impact click functionality as well, since the text could obstruct clicking on the image.

HTML:

//The next pickaxe price
<p id="picklvl">Upgrade Pickaxe $<span id="picklvlc">5000</span></p>


//My location for my img
<img id="buy2" src="img/buy2.png">

CSS:

// Text that displays price of next pickaxe
#picklvl { 
    z-index: 100;
    position: absolute;
    font-family: fantasy;
    top: 52%;
    left: 55px;
    font-size: 15px;
    width: 130px;
}

// Gives location + shadow to my buy2 image
#buy2 {  
    position: absolute;
    top: 60%;
    left: 13px;
    box-shadow: 5px 5px 5px black;
    border: 1px solid;
    border-radius: 5px;
    z-index: -1;
}

// When I hover over buy2, shadow changes color
#buy2:hover { 
    box-shadow: 5px 5px 5px #272727;
}

Answer №1

When your text is placed over your image, it's common for the hover effect not to work due to standard browser behavior. Since the text and image are separate elements at the same level in the DOM, only one can be hovered over at a time.

To resolve this issue and have the effect apply when hovering over the text as well:

#buy2:hover,
#picklvl:hover ~ #buy2 { 
    box-shadow: 5px 5px 5px #272727;
}

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

Choose a group of radio buttons inside a container when a button is clicked

I have a bunch of containers containing radio buttons. The goal is for the container of a selected radio button to appear different: input[type="radio"]:checked+.container { border: 5px solid red; } <div class="container"> <input class="btn ...

Tips for utilizing CSS to position a semi-circle in the middle of an image

Can CSS create a half circle effect on any image? I want to achieve a half circle effect in an image using CSS. Is this possible or not? ...

Create geometric shapes on Google Maps version 2

Can anyone guide me on how to draw a polygon on Google Maps with user-input coordinates? I have two input fields for latitude and longitude, and when the user clicks the button, I want the polygon to be drawn. The code I currently have doesn't seem to ...

Overcoming Challenges with Ajax Success in Bootstrap DataTable Modal

Recently, I created a webpage featuring a top fixed navbar and a CRUD datatable with pagination supported by buttons that trigger modals. However, I'm encountering an issue where upon clicking the delete button in the modal to remove a record, the mod ...

Issue with Firefox: Click event not triggered when clicking on CSS pseudo element

Check out my custom-made button: <button class="btn-close">Close alert</button> Here's the CSS styling for the button: .btn-close{ position: relative; height: 30px; border: none; background-color: #332b2a; color: #ff ...

"Placing an image at the bottom within a DIV container in HTML

My goal is to neatly align a group of images at the bottom of a fixed-height div. The images all have the same height and width, making the alignment easier. Here is the current structure of my code: <div id="randomContainer"> <div id="image ...

Using Bootstrap 4, you can create nested rows that will automatically expand to fill their parent container, which in turn has been set

In my current setup, I have a div with the class "d-flex flex-column" that contains a navbar and a container. Within this container, there is another div with the class "d-flex flex-column" which then contains two rows. I am using flex-grow to make the con ...

Struggling to align my overlay accurately by combining absolute and relative positioning

I'm currently tackling a frontend mentor project, and I've hit a roadblock trying to get my image overlay to position itself over the image rather than below it. I've set the parent position to relative and the overlay to absolute, but so fa ...

Utilizing React JS: Displaying or Concealing Specific Components Based on the URL Path

Is there a way to dynamically change the navbar items based on the URL without having separate navbar components for each side? My current navbar design features 3 links on the left side and 3 links on the right, but I want to display only one side at a ti ...

Angular JS: Automatically toggle the visibility of a div on a panel click event

There is a row, panel, and a closed div on load. Clicking on the panel should make the div appear while making the row and panel disappear. Clicking on X should make the panel and row appear again. <script src="https://ajax.googleapis.com/ajax/libs/ ...

An exception known as NullPointerException arises when attempting to invoke JDBC within a servlet

While running my RegistrationServlet, I encountered an issue when trying to create a Database object. Below is the servlet code snippet: @WebServlet("/register") public class RegistrationServlet extends HttpServlet { private static final long serial ...

Styling the body element in Material UI: A guide to customizing the

I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...

Ways to ensure a form label is accessible via keyboard navigation

My HTML5 form collects user information and processes it upon submission. With the help of the jQuery Validation Plugin, input validation is performed. In case of errors, an error-message-container div is displayed at the top of the screen, listing all err ...

Is it feasible to retrieve and view local storage data within an Electron application?

I created an electron application that enables users to drag and drop elements like divs on the screen, saving their positions in localstorage as a class. The purpose is to ensure that any modifications made by the user persist even after reloading or re ...

Begin counting starting from 1 all the way up to 24, then feel free

I've developed a counter that increments from 0 to 24, and once it reaches 24: setInterval(function(){DayAndNight()}, 1000); var iState = 12; function DayAndNight() { //console.log('test'); switch(iState) ...

Handling a change event for a mat-datepicker in Angular 7 can be tricky, especially when its value is tied to an optional input parameter. Let's dive into how to

I've recently started working with angular development and encountered a challenge with a mat-datepicker. The value of the datepicker is connected to filterDate using [(ngModel)] as an @Input() parameter. I have implemented a handleChange event that e ...

Is it possible to use cURL to open a particular frame and pass a parameter at the same time?

Currently, I am working on a website with a layout consisting of three frames. The first frame contains two columns, with the second column having two rows. Frame 1 displays a list of countries fetched from a database in the form of URLs. When a country i ...

The interaction between a parent element and an iframe, combining mouseover/out events with clicking actions

I am brand new to programming and seeking some guidance. I came across a post about mouseover/out combined with click behavior that I found intriguing. However, I am struggling to implement it successfully in my code. Here is the code snippet: Child.htm ...

Ways to show dynamic text according to slider adjustments

I am struggling with adding an if condition to my form that includes a horizontal slider. My goal is to display text based on the position of the slider. Can someone offer some guidance on this, please? Here's my HTML code snippet: <form method=" ...

HTML Data Service for WCF

Is there a way for users to easily display a list of their publications on their websites? I'm considering pulling data from a SSRS database and using a WCF Data Service. However, the WCF Data Service only outputs ATOM or JSON data. Is this the right ...