0

Is it possible to make the following jQuery with pure CSS(3)?

$(".js.outer").hover(function() {
    $(this).css({'border': '2px inset red'});
    return false;
}, function() {
    $(this).css({'border': 'none'});
    return false;
});

$(".js.inner").hover(function(event) {
    $(this).css({'border': '2px inset blue'});
    return false;
}, function() {
    $(this).css({'border': 'none'});
    return false;
});

with this HTML

<div class="js outer">
    <div class="js inner">
    </div>
</div>

I have tried in this fiddle http://jsfiddle.net/AA9Nw/, however when I hover the inner element, the outer also gets the hover event. (with CSS)

On a side note, the jQuery one seems a bit buggy, when the mouse enters from the left or right the hover effect doesn't let go properly. Am I doing something wrong?

Mads Ohm Larsen
  • 3,315
  • 3
  • 20
  • 22
  • 1
    Take a look at this previous question related to what you are trying to achieve. http://stackoverflow.com/questions/16331754/hover-effect-wont-trigger-underlying-elements – lukeocom May 16 '13 at 07:28
  • 2
    Yeah...try to separate your divs.. – Olrac May 16 '13 at 07:30
  • Why you set the HTML as parent/child elements? Can you changed it or not? –  May 16 '13 at 07:31
  • @lukeocom: I am trying to archive the opposite of what he is. I don't want the outer element to be hovered when hovering the inner element, and I want to only use CSS. – Mads Ohm Larsen May 16 '13 at 07:31
  • @Mojtaba: Yes, I am able to move the inner out of the outer container, however I want to know if it is possible to do with the HTML being as it is. – Mads Ohm Larsen May 16 '13 at 07:32
  • @mads - agreed. But that question IS related to what you are trying to do regardless, and does provide some insight to your question. – lukeocom May 16 '13 at 07:46

2 Answers2

3

Keep calm and try this

<div id="div2"></div> <div id="div3"></div>

No Javascript just only css demo

Olrac
  • 1,527
  • 2
  • 10
  • 22
2

Working FIDDLE Demo

Separate your divs:

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
</div>

And this is the CSS:

.container {
    position: relative;
}

.one {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: green;
}

.two {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
    background: yellow;
}

.one:hover {
    border: 2px solid red;
}

.two:hover {
    border: 2px solid blue;
}