Hiding an object using css

I am trying to hide a vertical bar I have created in a jQuery Flot graph when the mouse is not within the bounds of the grid. I set me horizontal bounds for the grid as such: horizontalBounds = [leftOffset, plot.width() + leftOffset];. I then used an if statement to say "if the mouse is within the vertical bounds, do this to the verticalBar.css."

if (position.pageX >= horizontalBounds[0] && position.pageX <= horizontalBounds[1]) {
            if (typeof verticalBar !== "undefined" && verticalBar !== null) {
              verticalBar.css({
                transform: "translate(" + position.pageX + "px, 0px)"
              });
            }

Below is my css code (which is actually in my javascript file; don't ask...). What do I need to do to hide the verticalBar when the mouse is not within those horizontal bounds? I was thinking I could just add the attribute `visibility: hidden' to the verticalBar.css, but I can't figure out how to do that. Any hints?

verticalBar.css({
              backgroundColor: "#F7E4E6",
              width: "1px",
              height: "100%",
              position: "absolute",
              padding: 0,
              margin: 0,
              left: 0,
              transform: "translateX(" + plot.getPlotOffset().left + "px)"
            });
          }

Solution

so none of those methods seemed to work for me. I ended up discovering that Flot has a crosshair plugin (flot.crosshair). The crosshair can be configured to act only on the x axis/ x coordinate as it tracks the movement of the mouse. Here is an example of the crosshair tracking in action: Flot Tracking Example. Once the plugin was added, I was able to get the desired results; as the "vertical bar" only shows up when the cursor is on the grid. Below is really all you need to do to configure it (other than adding the plugin to the appropriate files). Hope this helps someone in the future.

 plot = $.plot(
                placeholder
                data
                grid:
                    clickable: true
                    hoverable: true
                    color: "white"
                    mouseActiveRadius: 1000
                tooltip:
                    show: true
                    content: '%y'

                crosshair:
                    mode: "x"
                    color: "#FFFFFF"
                    lineWidth: 1