What technique works best for changing the visibility of an image without causing other elements to shift position?

On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a solution to prevent this.

The image in the table cell is positioned on the top right using the following code:

<td class="tableCell">
    <span class="cellMenu">
        <img src="/Icons/arrow_down.png" class="seatMenuArrow">
    </span>
    A bunch of other text that is all center aligned
</td>

Below is the CSS that places the cellMenu image at the top right.

.cellMenu
{
    display:none;
    float:right;
    cursor: pointer;
}

To show the image only on hover, I am using the following jQuery:

$('.tableCell').live('hover', function () {
    $(this).toggleClass("hover").find(".cellMenu").toggle();
});

While this method works, the other centered text moves when the image is displayed. How can I ensure that only the image is shown without affecting the alignment of the surrounding text?

jquerycsshovertoggle

Answer №1

Try this code snippet using vanilla JavaScript:

.cellMenu img
  {
    opacity:0;
    float:right;
    cursor: pointer;
  }

.cellMenu:hover img
  {
     opacity: 1;
  }

Check out the JSfiddle link for a demo.

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 deleting elements that do not have a specific class assigned

My HTML page is quite large. Various elements such as p, h1, and div are labeled with the 'keep_me' class. Is there a way to remove all elements from the page that do not have this class using jQuery? I attempted something like this, but it didn ...

jqueryjquery-selectors

What is the best way to retrieve response data from php using ajax in a single file?

Trying to retrieve PHP response data using AJAX has been a challenge for me. My goal is to search for a specific string in testing.txt based on user input. If the string is found, PHP should output "1", but no matter what I attempt, AJAX consistently retur ...

phpjqueryajax

Adjust size of item within grid component in VueJS

I have a grid container with cells and a draggable item in a Vue project. I am trying to figure out how to resize the box inside the grid component (refer to images). https://i.stack.imgur.com/q4MKZ.png This is my current grid setup, and I would like the ...

javascripthtmlcssvue.jsgrid

Using JQUERY to create a dropdown menu that dynamically changes based on the date field

I am currently working on a JQUERY project and facing a challenging situation. I usually know how to create dropdown menus that depend on one another, but this time I need a dropdown menu that displays age ranges based on the date entered in the birth-date ...

javascriptjqueryajax

Interactive navigation with jQuery

I am currently utilizing a jQuery menu script that enhances the navigation structure on my website: (function($) { $.fn.blowfish = function() { // concealing the original ul dom tree $(this).hide(); // constructing a container from top-l ...

jqueryhtml

C# fails to accurately interpret JSON Arrays

I'm dealing with a peculiar JSON issue. I am currently using ASP C# and have a View that sends a JS-Array to a Controller Action. Here is the JSON Data structure: public class MapData { public List<Point> Points { get; set; } } public cla ...

c#jqueryjson

Ways to incorporate a scroll feature and display an iframe using JQuery

Is there a way to animate the appearance of hidden iframes one by one as the user scrolls down the website using jQuery? I have come across some solutions, but they all seem to make them appear all at once. I'm looking for a way to make the iframes s ...

javascripthtmljquerycssiframe

Looking to utilize jQuery AJAX and PHP to submit data?

I have encountered an issue with inserting data into the database using this code. I have double-checked my PHP code and it seems to be correct. Can anyone help me identify what might be causing the problem? $(document).ready(function() { $("#submi ...

jqueryajaxinsert

Issue with Jquery .scroll method not triggering display:none functionality

Styling Using CSS #acc-close-all, #to-top { position: relative; left: 951px; width: 29px; height: 42px; margin-bottom: 2px; display:none; } #acc-close-all a, #to-top a { position: absolute; float: right; display: block ...

javascriptjqueryhtmlcss

Use a swipe gesture to move through the slideshow on a touchscreen device

I am currently working on a slideshow that allows users to navigate through images by clicking either the next or previous buttons. When a user clicks on one of these buttons, the next or previous image is loaded into the img src, as shown below. In addit ...

javascriptandroidjqueryiphonejquery-mobile

What is the best way to retrieve and display data from a JSON object that has been encoded using json_encode on one page.php, in another page.php?

I have a specific requirement that involves calling JSON data from one PHP page and displaying it on another PHP page. Can someone guide me on how to achieve this? Below is the JSON code that I need to retrieve: <?php include("Connect.php"); $Db = m ...

phpjqueryhtmlajaxjson

IE8 does not support Jquery ajax() for cross domain requests to remote servers

My current script includes an ajax request to a remote server that provides a plain text response. This setup functions properly in all browsers with the exception of IE8, which is not surprising. The script snippet looks like this: $.ajax({ url: &apos ...

javascriptjqueryajaxinternet-explorer-8cross-domain

Updating the progress bar without the need to refresh the entire page is

Currently, I have two PHP pages: page.php and loader.php. Loader.php retrieves data from MySQL to populate a progress bar, while page.php contains a function that refreshes loader.php every second. This setup gets the job done, but it's not visually a ...

javascriptphphtmljqueryajax

Using the linear-gradient method in CSS for border images

I managed to successfully create a design using the CSS properties border-image and linear-gradient. However, I am struggling to understand the syntax involved. While I grasp the concept that the series of colors defines the gradient transition, as well as ...

htmlcss

Sending both the minimum and maximum slider values to PHP using POST can be achieved by formatting the data correctly

I am attempting to transmit the minimum and maximum values to PHP using submit through a dual slider bar The static page makes a request to the server-side PHP code <?php include('server/server.php') ?> Below is the JavaScript code ...

javascriptphpjqueryhtml

The background size of each list item is determined by the size of the item

I'm trying to create a menu using an unordered list, where each item has a background color. However, I want the width of each item to be smaller than the list itself and aligned to the right. Any ideas on how to achieve this? Here is the HTML code: ...

htmlcsslistbackground-coloritems

Unable to Trigger Jquery Scroll Event

I'm trying to figure out why a div is not appearing when the page is scrolled down. The issue is that my page body and most other elements have overflow hidden, except for a table that appears at a certain point on the page when a button is pressed. T ...

jqueryhtmlcssscroll

Attempting to align content in the middle of the page across all web browsers

I need assistance with centering all the content on my website across different screen sizes and browsers. Currently, everything appears off-center and aligned to the left on various screens I have tested. You can view the HTML and CSS code in this link. H ...

htmlcss

Changing the position of a sprite using jQuery

Looking for assistance in moving the scroll location onClick of another div using jQuery. The image is a sprite. .top-background{ background: url("../images/mainall.jpg") no-repeat scroll 0px 0px transparent; height: 888px; width:1024px; } ...

jquerycssattributessprite

Remove the float from the final list item in order to resolve display issues in Internet Explorer

I am trying to create a menu with the following HTML structure: <ul> <li id="btnHome"><a href="#">Link One</a></li> <li id="btnAbout"><a href="#">Link Two</a></li> <li id="btnContact"> ...

htmlcssinternet-explorer