problem with concealed picture when hovering cursor

While I know this issue has been discussed before, I am facing a slight confusion regarding displaying an image on MouseOver. Currently, I have a div container with a colored background that shows when hovered over. You can see an example of this here - scroll down to the image at the bottom.

The problem I'm encountering is related to a hidden button that I only want to be visible when the user hovers over .product-shot-bg. I've tried to implement this functionality, but so far, I haven't been successful. Here's what I've attempted:

<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>
javascriptjqueryhtmlcsscss-transitions

Answer №1

Your code has several issues that need addressing:

  • There appears to be a confusion between using document.getElementById and jQuery's ID selectors. Make sure you understand the difference in syntax between the two;
  • Remember that JavaScript identifiers cannot start with a #, so ensure you remove them from your function names like show and hide;
  • In your show/hide functions, make sure you are setting the style.visibility property to either hidden or 
    visible</code as needed;</li>
<li>Check for any extra whitespace in the element <code>id
    like in "viewProductBtn ".

To fix these issues, consider the following revised version of your code:

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

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

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

You can also test this revised version with a DEMO.

Answer №2

If you're looking to achieve a similar effect using jQuery, you can use the following code:

function displayProduct() {
  $("#productViewBtn").show();
}

function concealProduct() {
  $("#productViewBtn").hide();
}

I trust this information proves useful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Screen proportions altered - Background image disappearing | Unusual occurrences |

If you look at my site everything seems to be ok, ... untill you minimize the website. A horizontal scrollbar appears and when you use that scrollbar, you will see that my image has vanished. My Website I made that image responsive...so i have no idea wh ...

htmlcss

Remove data from a database using Ajax in ASP.NET MVC without utilizing DataTables

I'm encountering a slight issue with my code. I am attempting to delete a row from the database without using DataTables in ASP.NET MVC, but it seems to be not working as expected. I have displayed all items from the database on a page within div elem ...

javascriptc#jquery.netajax

Searching in TypeScript tables with Angular's search bar

I've successfully completed a basic CRUD application, but now I need to incorporate a Search Bar that can filter my table and display rows with matching letters. I'm unsure how to approach this in my component. I've seen examples using pipe ...

javascripthtmlangulartypescriptangular-ngmodelchange

Is there a way to transfer JavaScript data to PHP?

<div> <p>This is a sample HTML code with JavaScript for tallying radio button values and passing them to PHP via email.</p> </div> If you need help converting JavaScript data to PHP and sending it via email, there are v ...

javascriptphphtml

Leveraging the Jpeg-autorotate npm package to automatically adjust image orientation according to EXIF data in JavaScript

Struggling with an issue in my web app where uploaded images display sideways, I decided to utilize this module to rotate images based on the EXIF data. Here's a snippet of my code: <template> <div :class="$style.form247"> <Can ...

javascriptimagenpmonloadexif

Storing Checkbox Value and Name in an Array using React JS

I'm experiencing an issue with the checkbox. I need to capture the value and name data in array format for further processing. Checkbox Example: <input type="checkbox" id="Honda" name="A1" value="Honda" onCl ...

javascriptarraysreactjscheckboxpush

Confusion between $.each and animations

As I navigate through my journey $.each($(something).find(something), function(){ $(this).delay(1000).fadeOut(); }); I anticipated a delay of one second for each matching element before it disappears. However, what actually happens is a collective fa ...

jquery

What could be causing the href to malfunction on my local website?

I'm currently working on adding a new link that directs to a local HTML website within a menu list on a website. The main website is in ASPX format, but my focus is on the HTML version. The link I want to add leads to an HTML website stored on my loca ...

javascriptasp.nethtmlpermissions

Leverage Context API in your React application

Module 1: import "./styles.css"; import { useState, useEffect, createContext } from "react"; import { Component2 } from "./Component2.js"; export const userContext = createContext(); export default function Application() { ...

javascriptreactjsreact-context

What could be causing the template UI to not display the Vue data?

As someone new to Vue, I have defined my Vue code in the following way: import Vue from "vue"; export default Vue.extend({ data: () => { message: "show message"; }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js ...

javascriptvue.js

Typescript error: Unable to instantiate __WEBPACK_IMPORTED_MODULE_1_signature_pad__ as a constructor

Currently, I am working on a project using Angular2 and attempting to incorporate a JS library for signature input from https://github.com/szimek/signature_pad. In my code, I have tried utilizing the library in the following way: // .ts file import * as ...

javascriptangulartypescriptsignaturepad

How do you invoke a function from within another function in AngularJS?

I'm facing an issue with a function that needs to be called every time a page is loaded. I attempted to achieve this by using the following code: callFunction(); function callFunction(){ $scope.onClickModel(); } ...

javascriptangularjsmean-stack

When floating divs with varying heights are wrapped, they may become stuck in place

Hey there! Let's tackle a challenge: I've got a few divs, each with varying heights. These divs contain portlets that can expand in height. Here's a basic example: .clz { float: left; } <div class="container"> <div class="cl ...

htmlcssheight

The outcome displays an array of System.String objects

When I visit my GetBusiness.aspx page, a test list is created List<string> l = new List<string>(); l.Add("one"); l.Add("two"); l.Add("three"); l.Add("four"); l.Add("five"); // B. ...

c#jqueryasp.netarrays

The assignment of object properties seems to be failing in the outcome produced by Mongoose

After running a mongoose find query and storing the result in an object, I attempted to add a total coin value to each object by using the exec operation. However, when I printed the object on the console, it seemed that the value was not being assigned an ...

javascriptnode.jsmongodbmongoose

Reverting the box color changes in the opposite order of clicking them using HTML, CSS, and Jquery

As someone new to front end development, I am experimenting with creating multiple boxes using HTML, CSS, and jQuery. My goal is to have the boxes change color to blue when clicked, then revert back to their original color in the reverse order they were cl ...

jqueryhtmlcss

Unique style sheet for unique content block

Recently I made some custom modifications to a block by adding style attributes directly into the .phtml file between tags. Now, I am looking to create a separate file for my block so that it can use a custom .css file. Where should I place this new file? ...

cssfrontendblock

Guide on loading xml information from a web browser using JavaScript

I have been working on loading data from the browser using a URL and currently utilizing JavaScript to achieve this. window.onload = function() { // This is the specific URL I am attempting to load data from. // The XML fi ...

javascriptajax

Issue with accessing $index.$parent in function parameter within ng-repeat in AngularJS

Can anyone with more experience please explain to me why this particular code compiles successfully: <li class="btn dropdown top-stack breadcrumb-btn" ng-repeat="nodeName in selectedNodeNames"> <a class="dropdown-toggle btn-anchor"> ...

javascripthtmlangularjsangularjs-scopeangularjs-ng-repeat

What could be causing my item-list to malfunction in Vue.js?

I recently attempted to develop my own Vue.js application by following the provided documentation. Unfortunately, I encountered an error that has proven difficult to resolve. Despite my efforts to recreate the app as instructed, the list does not show an ...

javascripthtmlvue.js