"Enhancing user experience with jQuery hover effects on table

This is an example of the HTML structure:

<tr class="row-1 row-first">
  <td class="col-1 col-first">
    <div class="views-field views-field-field-logo-image"></div>
    <div class="views-field views-field-field-logo-title"></div>
  <td class="col-2">
<td class="col-3 col-last">

The ".views-field views-field-field-logo-title" is a title that will only appear when hovering over the table.

Below is the CSS for these elements:

.view-clone-of-logo td {
    width:230px;
    float:left;
    margin-right:30px;
}

.views-field-field-logo-title {
    background: none repeat scroll 0 0 #B2D433;
    color: #FFFFFF;
    font-size: 13px;
    height: 130px;
    margin: -5000px 0 0;
    opacity: 0.9; 
    padding-left: 10px;
    padding-top: 20px;
    position: absolute; 
    width: 220px;
    z-index: 10;
}

I have successfully implemented code to display the title on hover:

(function ($) {
    $(document).ready(function() {
        $('.view-clone-of-logo td').hover(function() {
            $('.view-clone-of-logo .views-field-field-logo-title').css("margin-top", "-155px");
        }, function() {
            $('.view-clone-of-logo .views-field-field-logo-title').css("margin-top", "-5000px");
        });


        });

}(jQuery));

However, when I hover, all titles are displaying over the images. How can I make sure only the title from a specific column is displayed?

jquerycsshtml-table

Answer №1

One option is to achieve this using only CSS

.view-clone-of-logo td:hover .views-field-field-logo-title {
    adjust the margin-top to -155px;
}

Answer №2

Here is a solution that should do the trick:

(function ($) {
    $(document).ready(function() {
        $('.view-clone-of-logo td').hover(function() {
            $(this).find('.views-field-field-logo-title').css("margin-top", "-155px");
        }, function() {
            $(this).find('.views-field-field-logo-title').css("margin-top", "-5000px");
        });


        });

}(jQuery));

The correction here involves jQuery finding the .views-field-field-logo-title within the hovered element, instead of globally across all elements with class 

.view-clone-of-logo .views-field-field-logo-title
.

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 incorporate white-space:normal within the text of a jQuery Mobile grid button?

Below is the code for my jQuery Mobile Grid buttons: <div class="ui-grid-b my-breakpoint"> <div class="ui-block-a"><button type="button" data-theme="c"> <img src="res/icon/android/business.png" height="45"><br>Business</ ...

javascriptjquerycssjquery-uijquery-mobile

Rails 4 experiences a strange phenomenon where Ajax is triggered twice, resulting in the replacement of

After reviewing other similar questions, it appears that the best approach is to wait for the initial Ajax request to complete before proceeding with the next one. I believed that the following code would handle this situation, but somehow the request is t ...

javascriptjqueryruby-on-railsajaxruby-on-rails-4

Modify the background color of the <li> element without using JavaScript after 3 seconds

Is it possible to change the background color of a <li> element without using javascript or JQuery, only with CSS? I've seen incredible things done with CSS alone and believe this is achievable. My <li> element functions as a horizontal m ...

htmlcss

Achieving full coverage of cell content within a cell area by utilizing align-items in CSS Grid

Is it possible to achieve two conflicting goals using CSS Grid? In my design, I want the content in each cell to be vertically centered using align-items: center; At the same time, I need the entire area of the cell to be filled with color. However, ...

htmlcsscss-grid

Get the ID from a row that was created dynamically

I have a webpage that pulls information from my database and displays it. Users should be able to click on the "details" link to see more details about a particular record, or click on an input box in the "check" column and submit to update the record stat ...

javascriptjqueryhtmlajax

designing items in various color palettes

section { background-color:#d5ecf2; width:1024px; height:200px; margin: 0 auto; } .sectiontext { float:right; height:180px; width:720px; margin:10px; } <section> <div class="sectiontext"> <h3>GDS 114.01: HTML and Javascript</h3 ...

htmlcssarticle

Switching Grid 1 and 2 in Bootstrap 4

Here is an example of what I need: Image: https://i.sstatic.net/EPCAq.png This is the code I am using: <div class="container"> <div class="row"> <div class="col-3"> <img src="image1.png" class="i ...

htmlcssbootstrap-4

Using ReactJS and SCSS to adjust the height: set the height to be twice the size of the element's

Is there a way to increase the height of a div each time it is clicked? I had an idea to add an extra CSS class to a div whenever a button is clicked. Here's how the concept might look: #divToBeDoubled { height: 100px; &.doubleHeight{ ...

cssreactjs

Trying to align a Material UI button to the right within a grid item

I'm attempting to right float the button below using material-ui, but I'm unsure of how to achieve this: <Grid item xs={2}> <Button variant="contained" color="secondary&quo ...

cssreactjsbuttonmaterial-ui

Using Javascript function with ASP.NET MVC ActionLink

I need help with loading a partial view in a modal popup when clicking on action links. Links: @model IEnumerable<string> <ul> @foreach (var item in Model) { <li> @Html.ActionLink(item, "MyAction", null, new ...

javascriptjqueryasp.net-mvc-4

The CSS for the ajax call functions correctly on desktop devices but is not displaying properly on mobile devices

My ajax call is facing an issue where the CSS classes for a loader and overlay are only being applied in desktop view, not mobile view. I am unsure of what mistake I may be making. Can someone help me resolve this problem? Here is the ajax call: function ...

javascriptjqueryhtmlcssajax

To make the down arrow image scroll to the end of the page after the 2nd click, simply follow these steps. Initially, the first click

After setting up the image icon and utilizing Javascript and jQuery, I encountered an issue with the down arrow functionality. The first click successfully takes me to the second row grid box downwards, but I am struggling to implement a second click actio ...

jqueryhtml

Outformatted Layout in HTML Email on Outlook, Post-Image Loading

When I send HTML emails in Outlook, I encounter a problem. Initially, the images do not appear when I view the newsletter, but the table layout is fine. However, once I download the images and they fit perfectly in their cells, the layout suddenly breaks ...

htmlcssemailoutlooknewsletter

css - aligning text below another text in the center

Looking to style a text in a specific color with a message about another text below it? Want the text centered but not sure how to position it correctly? margin: 0px auto; If this code isn't delivering the desired result and is positioning your text ...

csscenter

What could be the reason for my form submission redirecting to the PHP page?

(I recently discovered that I could edit and reopen the post I had previously made. Feeling a bit confused about the process...) After submitting the form, the email is sent successfully, but then I am redirected to my php page displaying the number 0. Th ...

phpjavascriptjqueryajaxforms

Adjust the height of the parent element containing the divs nested within the span

I recently created a unique square grid of SVG icons and positioned them directly to the right of some text within a header. The code for creating this grid looks like this: <div>HEADER TEXT <span> <div> <svg></ ...

htmlcss

Delete all offspring nodes from the Google organization chart

I am currently utilizing the Google Organization Chart to create a chart that resembles the attached screenshot. There is a specific method called removeRow(nodeIndex) that I am using to eliminate a node from the chart. However, one issue I faced is that ...

javascriptjquerygoogle-visualization

Module fails to load in the proper sequence

As a .NET developer who is relatively new to modern client-side web applications, I am currently working on developing an Angular2 charting application using Chart.js. The modules are being loaded with SystemJS. Below is the content of my systemjs.config. ...

javascriptjquerytwitter-bootstrapangularsystemjs

Ways to determine if a class is a part of the bootstrap framework

Is there a way to verify if a class like mt-3 or table-left is part of the bootstrap framework? Are there any online resources, tools, or plugins in VSCode that can assist me in determining if a class is a predefined bootstrap keyword? ...

htmlcssvisual-studio-codebootstrap-4bootstrap-5

Skipping every third index in a JQuery .each loop after removing an element

I have a project where I need to display elements in rows of 4, and when an element is deleted, I want the remaining elements to shift up. To achieve this, I am currently assigning a class "last" to every fourth item after a deletion and inserting a spacer ...

javascriptjqueryhtmlcss