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

[kimsia]

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:

The basic issue is I want a different behavior when I click on div.story-in-myworks OR div.pageimage-div-overlay which does NOT affect the click event handler for `a.btn-storysetting`

What I wanted to accomplish
===========================

R1. when cursor moves into any single `div.story-in-myworks`, an overlay appears over that `div` **(done)**

R2. when cursor moves into any single `div.story-in-myworks`, an image (`btn-storysetting12x12.png`) appears at the top right hand corner **(done)**

R3. when left click on the `btn-storysetting12x12.png`, a bubble appears right next to the image. **(done)**

R4. when the bubble appears, the selected `div.story-in-myworks` continues to exhibit the overlay look **(done)**

R5. After the bubble appears and then left click anywhere else in the doc, the bubble closes and `div.story-in-myworks` goes back to normal without the overlay **(done)**

R6. After the bubble appears, cursor can leave the bubble and the bubble stay visible and the overlay for the selected `div.story-in-myworks` remains. **(done)**

R7. When a bubble is opened for 1 `div.story-in-myworks` and then cursor opens the `btn-storysetting12x12.png` of ANOTHER `div.story-in-myworks`, the previous bubble disappears and the corresponding overlay is hidden, but the currently selected `div` now has the overlay and the bubble appears for the currently selected `div` **(done)**

R8. Without changing any of the previous 7 behavior, I want to be able to click on the `div.story-in-myworks` which leads to another behavior e.g., navigating to another webpage.

Note that those marked **(done)** are accomplished. Please see the demo [here](http://dl.dropbox.com/u/8743819/reducedtestcase/overlaysandclickevents/src/dooverlay.html “reduced test size”).

What I tried and gotten as a result
===================================

I tried to do 8 but rule 2 – 7 will be instantly broken.

What I need
===========

A way to accomodate all 8 requirements without breaking anything else.

FAQs
====

Q1. is this your full app?

No. I did a reduced test case where i stripped out as much un-necessary code to explain my problem without affecting the problem statement as possible.

You can tell by noticing that there is no stylings for the links inside the talk bubbles in the demo.

Disclosure
========

D1. I have cross-posted this question over at stackoverflow [here](http://stackoverflow.com/questions/13910422/how-to-assign-different-behavior-to-parent-and-child-elements-when-child-is-hove “stackoverflow”) to gather greater attention to the question.

[kimsia]

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.
});

[Author]

Posts