Question

I am aware this topic has been raised severals, however i have a slight confusion with displaying an image on a MouseOver. I currently have a div container with a coloured background that displays when you hover it. click here – scroll down the image at the bottom

The issue i am having is that i have a hidden button which i only want to display when the user hovers over .product-shot-bg i have made an attempt with trying to activate this function but i’m unable to get it to work..here what i’ve done thus far…

<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

There are a couple of problems with your code:

• You are confusing document.getElementById with jQuery’s ID selectors. The former takes the id of the element, whilst the latter, uses the syntax #id. Thus, if you intend to use document.getElementById, you should pass it the id without the #;
• JavaScript identifiers/names can’t start with # so you should remove them from your show and hide functions;
• You want to modify the style.visibility property to either hidden or visible in your show/hide functions;
• There’s an extra whitespace in the id "viewProductBtn ".

Here’s a fixed version of it:

<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>​

And a DEMO.