用于悬停的CSS3或JAVASCRIPT_Javascript_Html_Css

用于悬停的CSS3或JAVASCRIPT

javascript html css

用于悬停的CSS3或JAVASCRIPT,javascript,html,css,Javascript,Html,Css,当我在一个链接上时，我想把一张图片放在证据里（并模糊所有其他的）。这里是我的Html： <body> <div id="back"> <div id="one"></div> <div id="two"></div> </div> <div id="menu"> <a href="one.html" id

当我在一个链接上时，我想把一张图片放在证据里（并模糊所有其他的）。这里是我的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中尝试的问题是：

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

在javascript中使用此脚本：

function over(id){

if(document.getElementById(id)){

var objet = document.getElementById(id);

objet.style.display = "none";

}

}

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

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

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

请参阅：

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>

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

无论出于什么原因，我都无法让CSS悬停解决方案工作

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

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

这就是您想要的吗？这是错误css的答案。在

#link1:hove#one{

中，应该是

：hover

而不是

：hove

注意HTML的格式不正确。

应该只是

jQuery？没有人要求jQuery。从[javascript]标记摘录中可以看出：“除非还包含框架/库的标记，否则应该是纯javascript的答案。”用户没有提到不要使用任何库。JQUERY是JavaScript毫无疑问，JQUERY是一个JavaScript库。但是，除非特别要求，否则将它用于可以使用的东西是不合理的。非常感谢埃奥利，这是我非常想要的。再次感谢你！！哦，不客气！这让我感觉很好！谢谢你的帮助反馈！：）

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

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

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