0

我知道这个话题已经被提出了好几个，但是我对在鼠标悬停上显示图像有点困惑。我目前有一个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>
4

2 回答 2

2

您的代码有几个问题：

  • 您document.getElementById对 jQuery 的ID 选择器感到困惑。前者采用id元素的 ，而后者使用语法#id。因此，如果您打算使用document.getElementById，则应将其传递给id 不带#;
  • JavaScript 标识符/名称不能以开头，#所以你应该从你的showandhide函数中删除它们；
  • 您想将style.visibility属性修改为任一函数hidden或函数；visibleshow/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。

于 2012-09-10T23:50:37.857 回答
0

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

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

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

希望这可以帮助！

于 2012-09-10T23:58:55.073 回答