如何在CSS中懸停時顯示隱藏內容

Question

我在做什麼錯？我來自https://stackoverflow.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"); 
    }); 
});