Question

我知道这个话题已经提出了几个，但是我在MouseOver上显示图像时有点混乱。我目前有一个带有彩色背景的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或show/hide;
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 。

Answer 2

你可以用jquery做这样的事情：

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

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

希望这有帮助！

在mouseOver上隐藏图像的问题

2 个答案: