CSS3 or JAVASCRIPT for hover

Question

I would like to put in evidence a picture (and blur all the rest) when I am over a link. Here my Html:

    <body>
      <div id="back">
        <div id="one"></div>
        <div id="two"></div>
      </div>
      <div id="menu">
        <a href="one.html" id="link1">one</a></div>
        <a href="two.html" id="link2">two</a></div>
      </div>
     </body>

and CSS:

#Back{
position: absolue;
background-image: url(images/fond.png);
width: 960px;
height: 600px;
margin: 0 auto;
}
#one{
background-image: url(images/formation.png);
width: 960px;
height: 600px;
z-index:1;
}
#two{
background-image: url(images/experiences.png);
width: 960px;
height: 600px;
z-index:2;
margin-top:-600px;
 }

The problem i tried in css with this:

#link1:hover #one{
  display:none;
}

And in javascript with this script:

function over(id){

if(document.getElementById(id)){

var objet = document.getElementById(id);

objet.style.display = "none";

}

}

Both doesn t work. I m not super good with the javascript. Thank so much for your help!!!

is this what you want just an answer given for this ques http://stackoverflow.com/questions/14565520/background-blur-with-css http://jsfiddle.net/KqgU8/ — Sagar Guhe, Oct 05 '13 at 18:43
Wrong css. In `#link1:hove #one{`, it should be `:hover` instead of `:hove` — Rajesh, Oct 05 '13 at 19:06
Note that your HTML is misformed. `` should likely be just `` — Leo Nyx, Oct 05 '13 at 19:12

Xitalogy · Accepted Answer · 2013-10-06T00:17:21.397

HTML:

<div id="menu">
    <a href="one.html" id="link1">link1</a>
    <a href="two.html" id="link2">link2</a>
</div>
<div class="div0" id="zero">
    <div class="div1" id="one"></div>
    <div class="div2" id="two"></div>
</div>

CSS:

.div0 {
    position: absolute;
    top: 30px;
    left: 0px;
    background-image: url(http://www.sanbarcomputing.com/images/js.jpg);
    background-size: 400px 400px;
    width: 400px;
    height: 400px;
    transition: 1s;
}
.div1 {
    position: absolute;
    top: 30px;
    left: 0px;
    background-image: url(http://www.sanbarcomputing.com/images/html5-logo.png);
    background-size: 200px 200px;
    width: 200px;
    height: 200px;
    transition: 1s;
}
.div2 {
    position: absolute;
    top: 30px;
    left: 200px;
    background-image: url(http://www.sanbarcomputing.com/images/class-header-css3.jpg);
    background-size: 200px 200px;
    width: 200px;
    height: 200px;
    transition: 1s;
}

JavaScript:

(function () {
    var zeroEl = document.getElementById('zero'),
        oneEl = document.getElementById('one'),
        twoEl = document.getElementById('two'),
        link1El = document.getElementById('link1'),
        link2El = document.getElementById('link2');

    function mouseover (elem) {
        elem.style.opacity = '.2';
        zeroEl.style.opacity = '.2';

    }

    function mouseout (elem) {
        elem.style.opacity = '1';
        zeroEl.style.opacity = '1';
    }

    document.addEventListener('DOMContentLoaded', function () {
        link1El.addEventListener('mouseover', function () {
            mouseover(oneEl); }, false);
        link2El.addEventListener('mouseover', function () {
            mouseover(twoEl); }, false);
        link1El.addEventListener('mouseout', function() {
            mouseout(oneEl); }, false);
        link2El.addEventListener('mouseout', function () {
            mouseout(twoEl); }, false);
    }, false);
})();

jsfiddle

I could not get the CSS hover solution to work, for whatever reason.

NOTE: This solution uses modern JavaScript techniques that may not be compatible with legacy browsers

EDIT: Updated to use Pavlo's opacity solution, fixed css errors, changed image alignments, made images independent divs

Thank you so much aeoril, it s excatly that i wanted. Thank you again!! — mhsc90, Oct 06 '13 at 07:14
Oh, you are welcome! That makes me feel good! Thanks for the feedback! :) — Xitalogy, Oct 06 '13 at 17:41

score -1 · Answer 2 · answered Oct 05 '13 at 19:11

-1

First, assign a class to each link:

<div id="menu">
   <a href="one.html" class=".link" id="link1">one</a></div>
   <a href="two.html" class=".link" id="link2">two</a></div>
</div>

Then, if your css hover does not work, try using jQuery to do the hovering:

$('.link').hover(function() {
  //handle mouse enter

}, function() {
   //handle mouse leave

});

Refer: http://api.jquery.com/hover/

answered Oct 05 '13 at 19:11

Rajesh

3,743
1
24
31

jQuery? Nobody asked for jQuery. From [javascript] tag excerpt: "Unless a tag for a framework/library is also included, a pure JavaScript answer is expected." – Pavlo Oct 05 '13 at 19:13
the user did not mention not to use any libraries. AND JQUERY IS JAVASCRIPT – Rajesh Oct 05 '13 at 19:15
1

No doubt that jQuery is a JavaScript library. But it's unreasonable to use it for something that can be [easily done with pure JavaScript](http://jsfiddle.net/m5uxB/1/), unless it's specifically asked for. – Pavlo Oct 05 '13 at 19:28

CSS3 or JAVASCRIPT for hover

2 Answers2