Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #41389
    kimsia
    Member

    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:

    #117884
    kimsia
    Member

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.