时间戳

首页 > 解决方案 > 如何使带有背景图像的 div 可点击

html - 如何使带有背景图像的 div 可点击

问题描述

我试图使这个 div 可点击：

 <a href="{{ url_for('germany') }}">
            <div class="item item--germany">
                <div class="item__details">
                    Germany 
                </div>
            </div>
        </a>

div 是一个背景图像，当我尝试像上面那样链接它时，图像变成了它的 1/8 大小，并且文本中有一条时髦的线。这是CSS：

.item {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: end;
          justify-content: flex-end;
  box-sizing: border-box;
  background: #0c9a9a;
  color: #fff;
  grid-column-start: auto;
  grid-row-start: auto;
  color: #fff;
  background: url("https://images.unsplash.com/photo-1470124182917-cc6e71b22ecc?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
  background-size: cover;
  background-position: center;
  box-shadow: -2px 2px 10px 0px rgba(56, 41, 41, 0.4);
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  cursor: pointer;
  counter-increment: item-counter;
}

.item:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.item:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);

.item--germany {
    background-image: url("../images/germany.jpg");
a {
    color: inherit;
    text-decoration: none; /* no underline */
  }

我读到我可以做类似的事情，<a href><img="image.jpg></a>但这会删除我的 div 并且我认为悬停效果仍然有效。

标签： htmlcsshref

解决方案

你在测试什么代码？我有时会使用网站 repl.it 或 codepen.io 来测试我的代码，如果它不打算在我的笔记本电脑上进行规划

推荐阅读