hover over the picture with your cursor

Struggling with jquery and css, could use some assistance :)
Check out my html code below:

<html>
<head>
//myscripts
<script>
$(document).ready(function(){
    $(".cover").hover(function(){
        //the function i need to write
    });
});
</script>
</head>
<body>
<div class="card">
    <img class="cover" src="cover.png" />
    <span class="detail" style="display:none;">
        More details
    </span>
</div>
<div class="card">
    <img class="cover" src="cover.png" />
    <span class="detail" style="display:none;">
        More details
    </span>
</div>
<div class="card">
    <img class="cover" src="cover.png" />
    <span class="detail" style="display:none;">
        More details
    </span>
</div>
</body>
</html>

In need of a function where the detail class fades in when cursor hovers over image. Detail box should not disappear when cursor is moved over it. Any help would be appreciated, thank you!

javascriptjqueryhtmlcss

Answer №1

Here are some helpful jQuery methods you can utilize:

1) .hover() allows you to manage actions when the mouse enters and leaves an element.

2) .next() helps in locating the immediate sibling element following a specified element.

3) .fadeToggle() enables toggling between fade in and fade out effects.

$(".cover").hover(function(){
    $(this).next().stop().fadeToggle();
});

Check out this Fiddle Demo for more details!

Answer №2

Here's a way to achieve this effect:

$(".cover").on("mouseover", function() {
    $(this).next().fadeIn();
}).on("mouseout", function() {
    $(this).next().fadeOut();
});

Answer №3

For a clean solution, I recommend using pure CSS. Check out this example

This approach utilizes the adjacent sibling selector to target the .detail element when the .cover element is hovered over. Surprisingly, it has good browser support (from IE7 onwards): View support table here

.detail {
    opacity: 0;
    transition: opacity 1s; 
}
.cover:hover + .detail {
    opacity: 1;
}

Answer №4

hover() is a function that utilizes two methods, one for mouse in and the other for mouse leave. It also makes use of closest() to search within the parent block.


$(".cover").hover(function(){
   $(this).closest('.card').find('.detail').fadeIn();
},function(){
   $(this).closest('.card').find('.detail').fadeOut();
});

Answer №5

You have the ability to achieve this with just CSS

.panel {
    visibility: hidden
}

.overlay:hover .panel{
    visibility: visible;
    animation-delay:2s;
}

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

Display a persistent bar on the page until the user reaches a specified <div> element through scrolling

Looking to implement a sticky bar at the bottom of my page that fades out once the user scrolls to a specific div and then fades back in when scrolling up and the div is out of view. This bar should only appear if the user's screen size is not large ...

javascriptjqueryhtmlcss

Is it possible to programmatically hide the Textarea and submit button for each row in a PHP-generated database table?

After spending a considerable amount of time on this project, I'm looking to incorporate a JavaScript effect (hide/unhide) into a basic submit form. Although the functionality is successful, it seems to be limited to only one row in the database tabl ...

javascriptphphtmlmysql

PHP experiencing issues when trying to save data to MySQL database

I'm currently facing an issue with my HTML page that contains input fields. I'm using PHP to validate the data and insert it into my MySQL Database named 'fantasymock'. Despite successful validation, the data does not get written into t ...

phphtmlmysqldatabase

Default Selection Issue with Radio Buttons in AngularJS

I am currently encountering an issue with the code snippet included in my directive template '<li ng-repeat="f in foos">' + '<input type="radio" ng-change="foo(f.key)" ng-model="selectedFoo" name="foos" id="{{f.key}}" value="{{f.ke ...

javascriptangularjs

Guide on how to navigate through sub-sections within a larger section

I am in the process of developing a rails app where I would like to include a side div for displaying news updates in a vertical feed style. I have made some progress with the layout, but now I am facing issues with finding a suitable news-ticker plugin th ...

htmlcssruby-on-railsbootstrap-4

List of checkboxes that will not trigger the AJAX call if only one checkbox is selected

Apologies for the quick repost, but I have exhausted numerous options in the hopes of finding a solution. I am facing an issue with my jQuery/AJAX form where it creates a blank result when only one checkbox is selected. However, selecting two or more chec ...

ajaxarraysjquerycheckbox

Trouble with jQuery: Tackling a Basic String and Variable Issue

I'm having trouble incorporating my variable into this specific string: var liPad = 20; $(this).css({'width' : width , 'height' : height, 'padding' : "'0px' + liPad + 'px'"}); The desired outcome is ...

javascriptstring-concatenation

Why am I unable to make a selection in the dropdown menu?

Can anyone help me figure out why I am unable to select an option from the material ui library and display it in the state? Has anyone else encountered this issue? For a detailed code example, check here import React from "react"; import ReactDOM from " ...

javascriptreactjsmaterial-ui

Concealing and revealing content using JQuery based on user input in

I'm attempting to create a feature where the visibility of a password field is determined by the value of another input element. For instance, when the username is set to "admin", the password field should be hidden. If any other value is entered in ...

javascriptjqueryhtmltogglebutton

New design in TinyMCE V5: Vertical toolbar labels arranged within a CSS grid layout

When TinyMCE version 5 is placed inside a CSS grid layout, the toolbar labels are displaying vertically. It appears that the "width:auto" property is not being applied correctly, and I am struggling to find a solution to fix it. I would greatly appreciat ...

csstinymce

Using the reduce method in JavaScript or TypeScript to manipulate arrays

Just exploring my culture. I have grasped the concept of the reduce principle var sumAll = function(...nums: number[]):void{ var sum = nums.reduce((a, b) => a + b , 0); document.write("sum: " + sum + "<br/>"); } sumAll(1,2,3,4,5); The r ...

javascriptarraystypescriptreduce

What could be causing the background image on my Jumbotron to fail to load?

Having some trouble with setting my image as the background of the Jumbotron. I've tried a few different approaches, but none seem to be working. It's not an issue with static loading because using img src directly into the Jumbotron section does ...

htmlcssdjango

Having trouble with accessing the upvote/downvote input within a Django template

Currently, I'm trying to retrieve upvote/downvote data from a Django template in the following manner: <form method="POST" action="{% url 'vote' %}" class="vote_form"> {% csrf_token %} <input type="hidden" id="id_value" name="valu ...

htmldjangodjango-formsdjango-templates

Error: ...[i] has not been defined

What seems to be the issue with this part of the script: function refreshLabels() { // loop through all document elements var allnodes = document.body.getElementsByTagName("*"); for (var i=0, max=allnodes.leng ...

javascriptjquery

Can you explain the variances between ngx-translate and ngx-i18next for me?

As ngx-i18next serves as a wrapper for i18next, I am curious about the specific differences in translation capabilities between ngx-translate and i18next. ...

javascriptangularinternationalizationi18nextngx-translate

Error: The function $(...).froalaEditor is not recognized | This issue is occurring within the $(document).ready(function(){}) block in J

When attempting to set HTML content of the Froala editor within a JSP using $(document).ready(), this error occurs. TypeError: $(...).froalaEditor is not a function | $(document).ready(function(){}) in JSP I read on a GitHub issue that placing jQuery sc ...

javascripthtmljqueryjspfroala

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please h ...

javascriptjqueryhtmlcssajax

Obtaining a worldwide JavaScript variable through AJAX JSON query

Hello, I have encountered an issue while using this code for my AJAX JSON request. When attempting to make jsonObj a global variable and then console.log() it, the debugger console shows that it is always coming up as undefined. To explain my question fur ...

javascripthtmljsonajax

Utilizing Node as an intermediary to transmit form-data to a Java server

I am working on an application that utilizes axios for communication with a node server, which then interacts with a separate java server. Calling the node server from the client: // assuming payload is of type FormData() axios.post(url, payload).then((r ...

javascriptnode.jsmultipartform-datajava-serverbusboy

The entire Sphere Geometry in three.js is not completely encompassed by the texture

Click here to view the image I'm trying to create a rotating moon. Everything works perfectly with MeshStandardMaterial (with color but no texture), however, when I apply a texture to the sphere geometry, it behaves strangely. The issue I'm facin ...

javascriptthree.js