jQuery classes fail to display effects when added

My HTML code is shown below:

<div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="span7">
          <div class="home-image left-image">
            <img class="photography-left-top" src="http://placehold.it/700x440" />
            <p class="image-text_left">Wedding Photography</p>
          </div>

          <h5>Heading</h5>
        </div>
        <div class="span5">
            <div class="home-image right-image right-image-top">
                <img class="photography-right-top" src="http://placehold.it/400x200" />
                <p class="image-text_right-top">Fashion Photography</p>
          </div>
          <div class="home-image right-image right-image-bottom">
            <img class="photography-right-bottom" src="http://placehold.it/400x200" />
            <p class="image-text_right-bottom">Contact</p>
          </div>

          <h5>Heading</h5>
       </div>

      </div>

 </div>

This is the CSS I have used:

.home-image {
    position:relative;
}
.photography-left-top,.photography-right-top,.photography-right-bottom {
    position : absolute;
}
.image-text_left {
    display:none;
    position:absolute;
    width:300px;
    top:200px;;
    left:200px;
    z-index : 100;
    font-weight:bold;
}
.image-text_right-top,.image-text_right-bottom {
    display:none;
    position:absolute;
    width:300px;
    top:100px;
    left:100px;
    z-index : 100;
    font-weight:bold
}
.right-image-bottom {
    margin-top:220px;
    position:relative
}
.right-top {
    position:relative
}
.home-img-hover {
    background:#911717;
}

JavaScript:

$(document).ready(function(){

        $(".left-image").hover(function () {
            $(this).find('.photography-left-top').fadeTo('slow',0);
            $(this).addClass('home-img-hover');
            $('.image-text_left').show();
        },
        function () {
            $(this).find('.photography-left-top').fadeTo('400',1.0);
            $('.image-text_left').hide();
        });

I expected a background color when hovering over left-image due to the addClass('home-img-hover'), but it is showing a white default background instead. Why is this happening?

View Sample in JSFiddle

jqueryhtmlcssclassaddclass

Answer №1

If you're wondering why you can't see the desired outcome, it's because the .home-image element lacks a specified height due to its contents being positioned outside of the normal document flow with position:absolute. To visualize the intended design, try adding dimensions to .home-image:

.home-image {
    position:relative;
    width:400px;
    height:240px;
}

JSFiddle

Answer №2

The issue lies in the height of your div element, which is currently set to 0px.

To fix this problem, simply include the following CSS properties:

height: 240px;
width: 400px;

Incorporate these styles into the .home-image class, and you will notice that your code functions correctly.

For an example, refer to this updated JSFiddle link

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

Switching the chosen option in the <select> element repeatedly

I have successfully set the selected value, but now I am wondering how to keep changing it continuously. Initially, my approach was to remove the "selected" attribute from all options and then add it back to the desired option. Surprisingly, this method w ...

javascriptjqueryhtml

Learn how to create a logarithmic scale graph using CanvasJS by fetching data from an AJAX call

window.onload = function() { var dataPoints = []; // fetching the json data from api via AJAX call. var X = []; var Y = []; var data = []; function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.overrideMimeType("applicatio ...

javascriptjqueryhtmlcsshtml5-canvas

Ways to apply Position Fixed to a particular Div element and subsequently eliminate that class while scrolling

Check out my current Jsfiddle project here I am working on a task that involves adding a class to a specific div when scrolling and then removing that class. Below is the JavaScript code I have written for this functionality: var targetDiv = $(".mainwra ...

javascriptjquerycssscrollfixed

Fixed background & cover design for Internet Explorer 11

Visit this link for more information: http://apolytos.com/new/img/test.html <!doctype html> <html> <head> <meta charset="utf-8"> <style> body { background:url("background.jpg"); background-repeat:no-repeat; backgr ...

cssinternet-explorer-11background-attachment

Easily manipulate textboxes by dynamically adding or deleting them and then sending the data to a

Can you provide a simple example of how to dynamically add and remove textboxes and then display the results? I envision it like this: [Empty Textbox][Add button] When 'Value1' is entered into the textbox and 'add' is clicked, it s ...

phpjavascriptjqueryhtml

XSLT - Dividing table into three columns while maintaining continuity on the same page

I'm looking for a solution where I can display a long two column table in a three-column page layout. The table should seamlessly flow from one column to the next, maintaining its headers throughout. Current attempts show the entire table in just one ...

cssxsltpdf

I'm having trouble with accessing an object by index in a knockout observablearray. It seems like the binding process is encountering difficulties

I'm completely new to stackoverflow and knockout, and I have a query. I want to access a JSON object by index. It works fine when I insert dummy data in my code, but it throws an error when I try to add data from JSON. Error Uncaught TypeError: Unab ...

javascriptjqueryjsonknockout.js

Container struggling to contain overflowing grid content items

While creating a grid in nextjs and CSS, I encountered an issue. Whenever I use the following code: display: grid; The items overflow beyond the container, even though I have set a maximum width. Instead of flowing over to the next row, the items just kee ...

javascriptcssreactjsnext.jscss-grid

Tips for ensuring that your website can recall which call-to-action (CTA) has been selected for redirection

I'm attempting to create a bilingual webpage in Spanish and English. My goal is to have a main page where the user selects the language, and once chosen, the page remembers the language preference for future visits instead of prompting the choice agai ...

javascripthtmlcssbutton

Is there a way to switch the cursor to a pointer when hovering over a bar on a ChartJS bar graph?

Here's the chart I created: createChart = function (name, contributions, idArray) { globalIdArray = idArray; var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: "bar", data: { lab ...

javascriptjquerycsschart.js

Is it possible to make a form field inactive based on another input?

I need help with disabling certain form fields until other fields are filled in. You can check out an example of what I'm trying to achieve here: https://jsfiddle.net/fk8wLvbp/ <!-- Bootstrap docs: https://getbootstrap.com/docs --> <div ...

javascriptjquerytwitter-bootstrap

Tips for detecting a false return value from a jQuery AJAX script

I am currently utilizing jQuery and AJAX to perform form validation when a new user is being created on my website. My development environment consists of OOP PHP in conjunction with jQuery and AJAX. Here is the code snippet I am using: $.ajax({ ...

phpjqueryajax

Issue with the scope causing global variable not to update when button is pressed

I am facing an issue with a declared variable and jQuery code that is supposed to store a form's value as the value of that variable when a button is clicked, and then execute a function. var verb = ""; $( "#submit" ).click(function() { verb = $(& ...

javascriptjqueryscope

Tips for sending multiple values in a data object using jQuery AJAX

I am currently working on a form that contains two input fields, with the possibility of more being added later. The first input is a text field and the second is a checkbox. I want to be able to send these inputs using $.ajax. To accomplish this, I have ...

javascriptjqueryhtmlajax

What is the best way to add flair to the HTML <title> tag?

Just a quick question - I'm wondering if there is a method to apply CSS styles to an HTML element. Here's an example declaration: title { color: red; font-family: 'Roboto', sans-serif; } ...

htmlcsstitle

Surprising outcome when attempting to load a partial view into an Internet Explorer 8 DOM using jQuery Ajax

Encountering a peculiar issue while loading a Partial View with jQuery Ajax in IE8. The result appears distorted when viewed using this browser. The hypothetical Partial View causing trouble looks like this: <aside>Example test</aside> After ...

asp.net-mvc-3jquery

Tips for incorporating Action Links into your CSS workflow

<li class="rtsLI" id="Summary"><a href="javascript:void(0);" onclick="javascript:rtsXXX.OnClientTabSelected(this‌​, 0);" class="rtsLink"><span class="rtsTxt">Test</span></a></li> I have made a change by replacing th ...

asp.net-mvchtmlcssrazorasp.net-mvc-4

Ensuring Consistent TD Heights in Email Designs

I am currently facing a challenge in building an HTML email, specifically in ensuring that two TD elements have the same height across all email clients. Since it is a responsive email design, I have opted to separate the columns into two tables instead o ...

htmlemailhtml-tableemail-client

Looking to enhance code readability using regular expressions

While I am not a programmer, I enjoy exploring and learning new things. Here is what I have: 1) My URL is structured like this: http://site.com/#!/show/me/stuff/1-12/ 2) I have a jQuery pagination script that displays the number of available pages. Each ...

javascriptjqueryregex

Updating the image source attribute using Vue.js with TypeScript

Let's discuss an issue with the img tag: <img @error="replaceByDefaultImage" :src="urls.photos_base_url_small.jpg'"/> The replaceByDefaultImage function is defined as follows: replaceByDefaultImage(e: HTMLImageElement) ...

htmltypescriptimagevue.js