javascript - mouseOver 上的隐藏图像问题

Question

我知道这个话题已经被多次提出，但是我对在鼠标悬停上显示图像有点困惑。我目前有一个带有彩色背景的 div 容器，当您悬停它时会显示该容器。 click here - 向下滚动底部的图像

我遇到的问题是我有一个隐藏按钮，我只想在用户将鼠标悬停在 .product-shot-bg 上时显示我已经尝试激活此功能但我无法让它工作..这是我到目前为止所做的...

<script>
function show(#viewProductBtn){
    document.getElementById(#viewProductBtn) = "visible";
}

function hide(#viewProductBtn){
    document.getElementById(#viewProductBtn) = "Hidden";
}
 </script>

 <style>
 .product-shot-bg{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    width: 208px;
    height: 453px;
}

.product-shot-bg:hover{
    background-color: #f3f3f3;
}

    #viewProductBtn{
    background: url(css/images/viewProductBtn.png) no-repeat;
    width: 197px;
    height: 40px;
    float: left;
    visibility: hidden;
}
     </style>

   <!-- Html -->

   <div class="product-shot-bg" onMouseOver="show('#viewProductBtn')"      onMouseOut="hide('#viewProductBtn')"> <a href="#" id="viewProductBtn "></a>

Answer 1

您的代码有几个问题:

• 您混淆了 document.getElementById 和 jQuery 的 ID selectors .前者采用元素的 id，而后者使用语法 #id。因此，如果您打算使用 document.getElementById，您应该将 id 传递给它 而不是 #;
• JavaScript 标识符/名称不能以# 开头，因此您应该将它们从show 和hide 函数中删除；
• 您想在显示/隐藏中将style.visibility 属性修改为hidden 或visible职能；
• id "viewProductBtn " 中有一个额外的空格。

这是它的固定版本:

<script type="text/javascript">
function show(viewProductBtn){
    document.getElementById(viewProductBtn).style.visibility = "visible";
}

function hide(viewProductBtn) {
    document.getElementById(viewProductBtn).style.visibility = "hidden";
}
</script>

<div class="product-shot-bg" onMouseOver="show('viewProductBtn')"      onMouseOut="hide('viewProductBtn')"><a href="#" id="viewProductBtn"></a>​

还有一个 DEMO .