mouseOver上的隐藏图像问题

Question

我知道这个话题已经被提了好几次了，但我对在鼠标悬停上显示图像有点困惑。我目前有一个div容器，当你悬停它时，它会显示彩色背景。点击此处-向下滚动底部的图像

我遇到的问题是，我有一个隐藏的按钮，我只想在用户悬停在.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选择器。前者采用元素的id，而后者使用语法#id。因此，如果您打算使用document.getElementById，则应将其传递给id，而不传递#
• JavaScript标识符/名称不能以#开头，因此您应该将它们从show和hide函数中删除
• 您希望在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>​

以及演示。

Answer 2

您可以使用jquery执行以下操作：

function show() {
  $("#viewProductBtn").show();
}
function hide() {
  $("#viewProductBtn").hide();
}

希望这能有所帮助！