Grow your CSS skills. Land your dream job.

how to assign different behavior to parent and child elements when child is hovering on top of paren

  • # December 17, 2012 at 3:23 am

    Long story short
    ================

    Please see the demo [here](http://dl.dropbox.com/u/8743819/reducedtestcase/overlaysandclickevents/src/dooverlay.html “reduced test size”).

    I have several `div.story-in-myworks`

    inside each `div.story-in-myworks`, there is a `div.pageimage-div-overlay` that controls the overlay over each `div.story-in-myworks`.

    Inside each `div.pageimage-div-overlay` there is a `a.btn-storysetting` responsible for hiding and showing a `div.storysettings_talkbubble_left`.

    both `a.btn-storysetting` and `div.storysettings_talkbubble_left` are child elements of `div.pageimage-div-overlay`.

    Here is a snippet:

    # December 18, 2012 at 1:27 am

    this is the code i used :

    /* tooltip for the settings */
    // when enter into a story
    $(“.story-in-myworks”).mouseenter(function(e){

    var currentStory = $(this);
    // and then click on the setting button of this story
    var settingBtn = $(this).find(“.btn-storysetting”);

    var container = $(this).find(“.pageimage-div-overlay”);

    settingBtn.click(function(e) {

    var settingBubble = $(this).next(“div.settings-bubble”);
    settingBubble.show();

    settingBubble.addClass(“selected-story-bubble”);

    currentStory.addClass(“selected-story”);

    $(“.story-in-myworks:not(.selected-story)”).click(function(e){
    hideSelectedBubble();
    });

    disableCssHoverOfPageOverlayDiv();

    settingBubble.click(function(event){
    //console.log(‘settings’);
    event.stopPropagation();
    clearTimeout(clickCover);
    });

    var newCurrentStory = $(“.selected-story”);
    newCurrentStory.find(“.pageimage-div-overlay-nohover”).addClass(“selected-story-overlay”);

    newCurrentStory.click(function(event){
    event.stopPropagation();
    });

    });

    container.click(function(e) {

    if ($(e.target).hasClass(‘btn-storysetting’)) {
    return;
    }

    // put your separate behavior for the parent element.
    });

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".