How to make hover using jquery without CSS?


Tags: jquery,html,css

Problem :

I have created some div dynamically with the class name ".pics" like below

$(MyJson).each(function (obj) {
            $("#GalleryPics").append("<div class='pics'><a href='#' class='delete'>some</a><a href='" + MyJson[obj].ImageURL + "' rel='lightbox-journey' class='delete'><img src='" + MyJson[obj].ImageURL + "' width='150' height='150' /></a></div>");
        });

Using this above code, i can get some images inside each div with ".pics " class name. Now i need to do that if i want to delete any image, i should show a delete button with its action on image hover.. ".delete" is the class which i want to show the delete button there.. How can i achieve it..

Note:

I have tried some CSS codes and .hover(function(){ too, but i couldn't achieve it.Please help me as soon as you can..

Thanks in advance..



Solution :

There is actually a JQuery .hover() function that does a good job.
This does use CSS for showing and hiding using a transition. you can easily change that to JQuery's show and hide functions if you like, though IMO plain CSS gives you more flexibility.

var pics = $(".pics");
var deleteThis = $(".delete");
pics.hover(function () 
{
    deleteThis.addClass("show")
}, 
function () 
{
    deleteThis.removeClass("show")
})

and then in the CSS,

.delete {
    position: absolute;
    height: 20px;
    top: -20px;
    left: 0px;
    right: 0px;
    color: white;
    transition: all .2s ease;
}

.delete.show {
    top: 0px;   
}

Here is a JSFiddle


    CSS Howto..

    how to overrule prior css

    How to make a div fill the remaning vertical space using css

    How to give viewers custom CSS option

    How to set a CSS property with a variable in JQuery?

    How to remove the white gap between the background image and the navigation bar

    How to change css of element using jquery

    how to override font-color dynamically with css color property

    HTML CSS How to stop a table to put the content after it on a new line?

    CSS: How to make background of an element stretch across the entire page?

    How to create custom horizontal radio buttons with CSS?

    How to prevent css hover effects executing before you reach the element with your mouse?

    How to dynamically change the color of the selected menu item of a web page?

    Bootstrap: Background image z-index to show it above bg color

    How could I use the html a tag to change div width and height?

    How to download CSS file through JQuery

    How to make link change the css in the following page [closed]

    How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

    How do I keep my footer text from appearing outside my footer

    How to achieve this formatting

    How to control number of items per row using media queries in Flexbox?

    How to programmatically download all contents of webpage, not only the source code in Java

    How to align social media icons in one row?

    How to display a header inline with paragraph text using divs or an alternative method

    How to restore color in css after mouse leave?

    How do I center images inside a list?

    Button Built in CSS showing different font color in FF and Webkit

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How to remove CSS attribute such that HTML attribute will take effect again?

    Content shows up when clicked on the link

    In a responsive layout how can I get divs to shrink uniformly?