Styling the sub-elements using CSS in JavaScript

Currently, I am dealing with two CSS classes: .dragbox and .removebutton.

The .dragbox represents a div, while the .removebutton is a button nested within the div.

On my page, there are multiple dynamically generated instances of .dragbox.

I am seeking a way to use JavaScript to ensure that only the .removebutton associated with the current .dragbox is visible.

At the moment, whenever I hover over a .dragbox, all the .removebuttons become visible for every .dragbox on the page. I aim to have only the specific one show up.

Below is the snippet of the CSS:

.dragbox {
  position:absolute;
  width:10px;
  height:25px;
  padding: 0.0em; 
  margin:25px;    
}

.removebutton {
  background-image:url(img/delete.png); 
  background-repeat:no-repeat;
  visibility:hidden;
}

And here is the corresponding JavaScript code:

$('.dragbox').hover(function() { 
  $(this).css('border', '1px solid #000');     
  $(this).css('background-image','url(img/move.png)');
  $(this).css('background-repeat','no-repeat');
  $(this).css('width', '15px');
  $(this).css('height', '15px');          
  $(".removebutton").css('visibility', 'visible'); 
});
javascriptcss

Answer №1

Give this a shot:

$('.dragbox').on('mouseover', function() {
    $(this).css({
        border: '1px solid #000',
        backgroundImage: 'url(img/move.png)',
        backgroundRepeat: 'no-repeat',
        width: '15px',
        height: '15px'
    });
    $(this).find(".removebutton").css('visibility', 'visible');
});

The original code you had would select all instances of .removeButton on the page. The revised code above will specifically target the .removeButton nested within the currently hovered .dragbox element.

Answer №2

avoid redundancy when mentioning (this) 

 $('.dragbox').on('mouseenter', function() {
    $(this).css({
        border: '1px solid #000',
        background-image: 'url(img/move.png)',
        background-repeat: 'no-repeat',
        width: '15px',
        height: '15px'
    });
    $(this).find('.removebutton').css('display', 'block'); /*alternative: visibility:visible*/
});

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

There is a gap found in the span element in Angular, but this gap is not seen in

Comparing two component templates, one in AngularJS and the other in modern Angular: <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover"> <span class="app-icon ap ...

javascripthtmlangularangularjs

php Use cURL and the DOM to extract content with specified CSS styling

Unclear in the title, I want to copy all content from a specific div on an existing webpage (not owned by me). The code successfully extracts the content. Extractor code: // Get Data $curl_handle=curl_init(); curl_setopt($c ...

phpjqueryhtmlcsscurl

Is it possible to have a div set to close upon loading the page?

Is there a way to have the toggle function set up so that when the page loads, the div being toggled starts out closed? I don't want them to be visible until clicked on. Best regards, Joey <script type="text/javascript> $(document ...

javascriptjquerytoggle

Are your file uploaders malfunctioning by saving empty image files?

I am currently working on a file uploader using JavaScript and Classic ASP. The process involves importing an image into a canvas, converting it to a base64 URL, and then sending that URL to the ASP script for decoding and downloading. Although my AJAX re ...

javascriptajaxfile-uploadasp-classic

Transforming a menu tab into an active anchor when navigating to a particular section

Hello, I have successfully created a JavaScript code that can dynamically add menu tabs into the menu list window.addEventListener("load", () => { const navList = document.getElementById("nav_list") const fragment ...

javascripthtmlcssfrontendweb-frontend

Select the text inside the current cell of a jqGrid table

The issue at hand is that when using jqGrid with cellEdit:true, users are unable to select text in a cell. Once the mouse button is released, the selection resets. This limitation prevents users from copying the selected text within cells. Has anyone enco ...

javascriptjqueryjqgrid

Utilizing jQuery to Toggle Visibility of Table Rows on Button Click

I have a unique layout on my page where there are two tables positioned side by side. The table on the left consists of buttons with company names, and the table on the right should display employees associated with each specific company. Upon initially l ...

javascriptjqueryhtml

Bypass Security Check in Firefox

I am facing issues while trying to automate selenium on a website owned by a third party. When an authentication prompt like this appears in Firefox, Selenium fails: https://i.sstatic.net/VHQB4.png You can see a similar situation when clicking the Displ ...

javascriptjavaseleniumauthenticationfirefox

"Unleashing the power of plugins in your Nuxt.js store: A step

I am facing an issue with my gtag (analytics plugin) where I can access it on my components but not on my store. Any suggestions are welcome. Thank you. plugins/vue-gtag.js import Vue from "vue" import VueGtag from "vue-gtag" export d ...

javascriptvue.jsvuexnuxt.jsgtag.js

Personalized Carousel using Ng-Bootstrap, showcasing image and description data fields

I have been working on customizing an Angular Bootstrap Carousel and have managed to successfully change the layout. I now have two columns - with the image on the right and text along with custom arrows on the left. My goal is twofold: First, I am lookin ...

cssangulartypescriptbootstrap-4ng-bootstrap

How to display text on a new line using HTML and CSS?

How can I properly display formatted text in HTML with a text string from my database? The text should be contained within a <div class="col-xs-12"> and nested inside the div, there should be a <pre> tag. When the text size exceeds the width o ...

javascriptjqueryhtmlcss

The issue of the color CSS rule not being applied to the button element when transitioning from disabled to enabled on browsers like Safari 14+ is a common challenge

There seems to be an issue with frontend form validation code affecting the disabled attribute of a submit button within a form. Two different css rules are applied for the enabled and disabled states, including changes in the text color of the button ele ...

cssiosmaterial-uiwebkit

delaying the alteration of an image attribute following an AJAX call

After clicking on a button, a function is triggered (think of it as a published/unpublished button). Immediately after the function is activated, I change the element to display a loader gif. function updateStatus(event, status, element, data, action) { ...

javascriptjqueryajax

Headers permitted for CORS blocking

Greetings, I have recently developed an API and frontend using React, utilizing axios for making requests. I implemented an authorization header with axios and authenticated it on the PHP server-side. However, there seems to be an issue where the Authoriza ...

javascriptphpreactjsaxioscors

Is there a way for me to insert a hook into the DOM after a promise has finished updating

Currently, I am tasked with maintaining a code snippet that resembles the following structure: {#await details} {#each values as value, i} <td id="{`${config.id}_${i}`}">{value}</td> {/each} {:then details_result} {#each de ...

javascriptpromisesvelte

Incorporate extra padding for raised text on canvas

I have a project in progress where I am working on implementing live text engraving on a bracelet using a canvas overlay. Here is the link to my code snippet: var first = true; startIt(); function startIt() { const canvasDiv = document.getElement ...

javascripthtmlcsscanvas

Tips for toggling the display of multiple ion-input fields based on the selected value from an ion-select dropdown

I am working with an ion-select element that contains options from 1 to 10. <ion-label> Select how many input fields</ion-label> <ion-select> <ion-option value="0"> Zero</ion-option> <ion-option value="1"> One</ion- ...

javascriptionic-frameworkionic2

Unusual situation involving the override of a function pointer variable

Let's explore a straightforward scenario: (function x(){ var foo = function(){ console.log('foo is alive!'); // set 'foo' variable to an empty function, using a delay setTimeout(function(){ foo = function(){}; ...

javascript

The background-size CSS property may experience malfunctioning on iOS devices when using Safari browser

My website has a body background size set, which works well on Android and Windows devices. The background size is intended to be 85% width and 5% height of the body. However, when loading the site on an iPhone, the height appears much larger than 5%. It s ...

htmlcssios

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

javascripthtmlcsssass