-1

当我通过链接时，我想证明一张图片（并模糊所有其余部分）。这是我的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>

和 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;
 }

我在css中尝试过的问题是：

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

并在 javascript 中使用此脚本：

function over(id){

if(document.getElementById(id)){

var objet = document.getElementById(id);

objet.style.display = "none";

}

}

两者都不起作用。我对 javascript 不太擅长。非常感谢您的帮助！！！

4

2 回答 2

2

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

无论出于何种原因，我都无法让 CSS 悬停解决方案正常工作。

注意：此解决方案使用可能与旧版浏览器不兼容的现代 JavaScript 技术

编辑：更新为使用 Pavlo 的不透明度解决方案，修复 css 错误，更改图像对齐方式，使图像独立于 div

于 2013-10-05T21:46:02.040 回答
-1

首先，为每个链接分配一个类：

<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>

然后，如果您的 CSS 悬停不起作用，请尝试使用 jQuery 进行悬停：

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

}, function() {
   //handle mouse leave

});

参考：http ://api.jquery.com/hover/

于 2013-10-05T19:11:23.083 回答