Question

我正在尝试使图像可点击，以便我可以将其用作下载PDF的按钮，尽管我觉得我过度思考并且让自己感到困惑。

我使用的代码示例：

df= pd.DataFrame(np.random.randint(1,4,[72,5]))
df.columns = ['col1','col2','col3','col4','col5']
df.index= pd.date_range('1/1/2011', periods=72, freq='H')

df[['col1','col2']].plot()

div ID随后与CSS一起使用以显示图像，因为我还想要一个悬停效果，因此用户在按钮上时会有某种反馈。

<div id="name"><a href="file.pdf"></a></div>

任何帮助将不胜感激，谢谢！

Answer 1

所以你面临的问题是链接（<a>标签）是实际按钮，但是没有尺寸，因为它是空的。请参阅此代码段。 <a>标签周围有一个红色边框，但没有任何东西填满它......

#name {
  background-image: url(http://lorempixel.com/400/200/sports/1/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
}

#name:hover {
  background-image: url(http://lorempixel.com/400/200/sports/2/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
  cursor: pointer;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
}

#name a {
    border:solid 1px red;
    background-color: orange;
    z-index: 999;
}

<div id="name"><a href="#/path/to/file.pdf"></a></div>

因此，如果您将所有这些样式设置为<a>标记并添加display: inline-block;，那么它可以在此处查看：

#name a {
  display: inline-block; /* add this line */
  background-image: url(http://lorempixel.com/400/200/sports/1/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
}

#name a:hover {
  background-image: url(http://lorempixel.com/400/200/sports/2/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
  cursor: pointer;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
}

#name a {
    border:solid 1px red;
    background-color: orange;
    z-index: 999;
}

<div id="name"><a href="#/path/to/file.pdf"></a></div>

可点击的图像按钮

1 个答案: