使用 css 隐藏对象

Question

我试图在鼠标不在网格范围内时隐藏我在 jQuery 图表中创建的垂直条。我将网格的水平边界设置为：horizontalBounds = [leftOffset, plot.width() + leftOffset];。然后我用 if 语句说 "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)"
              });
            }

下面是我的 css 代码（实际上在我的 javascript 文件中；不要问...）。当鼠标不在这些水平范围内时，我需要做什么来隐藏 verticalBar？我在想我可以将属性“visibility: hidden”添加到 verticalBar.css，但我不知道该怎么做。有什么提示吗？

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

Answer 1

尝试在 CSS 中使用 "display:none;"。

Answer 2

根据您想要隐藏栏的方式，您可以使用像 display: none.

这样简单的东西

如果您想添加一些动画，您可以使用一些 jQuery 函数来控制该特定节点。

您还可以利用一组 CSS class 名称交换来触发一些 CSS 动画。

Answer 3

所以 none 这些方法似乎对我有用。我最终发现 Flot 有一个十字准线插件 (flot.crosshair)。十字准线可以配置为仅作用于 x 轴/x 坐标，因为它跟踪鼠标的移动。这是一个十字准线跟踪的例子：Flot Tracking Example。添加插件后，我就能得到想要的结果；因为 "vertical bar" 仅在光标位于网格上时显示。下面是配置它所需要做的所有事情（除了将插件添加到适当的文件中）。希望这对将来的人有帮助。

 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

使用 css 隐藏对象

Hiding an object using css

javascript

jquery

css

flot