如何在CSS中悬停时显示隐藏内容

Question

我在做什么错？我来自https://*.com/a/26319532/5132778 我的代码：

#txtleft { 
 
    width: 25%; 
 
    float: left; 
 
    margin-left: 7%; 
 
} 
 
#txtleft.content { 
 
    display: none; 
 
} 
 
#txtmiddle { 
 
    float: left; 
 
    width: 35%; 
 
} 
 
#txtright { 
 
    float: left; 
 
    width: 25%; 
 
    margin-right: 7%; 
 
} 
 
#txtright.content { 
 
    display: none; 
 
}

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 
    $(".content1").on('hover', function() { 
 
     $(".content").css("display", "block"); 
 
    }); 
 
    }); 
 
</script> 
 
<div id="txtleft"> 
 
    LEFT SHOWN 
 
    <div id="txtleft" class="content"> 
 
    LEFT hidden</div> 
 
</div> 
 
<div id="txtmiddle"> 
 
    <div id="txtmiddle" class="content1"> 
 
    MIDDLE CONTENT</div> 
 
</div> 
 
<div id="txtright"> 
 
    <div id="txtright" class="content"> 
 
    right hidden</div> 
 
</div>

我期望它的工作不错，但我的Firefox并不做任何事情.....我只是想一些代码的页面，当居中中间DIV悬停它应该使内容可见光左，右，中间DIV

Answer 1

你的代码似乎是工作的罚款..

见fiddle ..

请更改<script>的jQuery如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌ 

删除多余的白色空间，将它添加到您的CSS

html,body{ 
    margin:0; 
    padding:0; 
}​ 

UPDATE

如果你正在努力实现，比如：在悬停时显示div，然后在没有徘徊时将其隐藏，然后可以使用jquery mouseover和mouseout函数执行此操作。

查看fiddle。

而且，修改后的脚本会是什么样子，

$(document).ready(function() { 
    $(".content1").mouseover(function() { 
     // show the element 
     $(".content").css("display", "block"); 
    }); 
    $(".content1").mouseout(function(){ 
     // show the element 
     $(".content").css("display", "none"); 
    }); 
});