使用背景图像和悬停效果链接 div

【问题标题】：Link over div with background image and hover effect使用背景图像和悬停效果链接 div
【发布时间】：2017-11-24 21:08:54
【问题描述】：

我有以下 div 网格

<div id="container">
<div class="imgContainer">
<div class="ar-image">
     <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div>
       <p class="descfirst">Progressive</p> 
       <div class="first"><span class = "green" style="width: 85%"></span></div>
       <p class="descsecond">Happy</p> 
       <div class="second"><span class = "green" style="width: 55%"></span></div>
       <p class="descthird">Creative</p> 
       <div class="third"><span class = "green" style="width: 43%"></span></div>
       <p class="descfourth">Slow</p> 
       <div class="fourth"><span class = "red" style="width: 75%"></span></div>
       <p class="descfifth">Boring</p> 
       <div class="fifth"><span class = "red" style="width: 65%"></span></div>
       <p class="descsixth">Text</p> 
       <div class="sixth"><span class = "red" style="width: 60%"></span></div>


       <h1 class="topleft">1 | Scooter</h1>
       <h3 class="topright">Rock</h3>
       <h3 class="bottomleft">T 21%, C 6%</h3>
       <h3 class="bottomright">XXX</h3>
</div>
<div class="ar-image">
     <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div>
       <p class="descfirst">Progressive</p> 
       <div class="first"><span class = "green" style="width: 85%"></span></div>
       <p class="descsecond">Happy</p> 
       <div class="second"><span class = "green" style="width: 55%"></span></div>
       <p class="descthird">Creative</p> 
       <div class="third"><span class = "green" style="width: 43%"></span></div>
       <p class="descfourth">Slow</p> 
       <div class="fourth"><span class = "red" style="width: 75%"></span></div>
       <p class="descfifth">Boring</p> 
       <div class="fifth"><span class = "red" style="width: 65%"></span></div>
       <p class="descsixth">Text</p> 
       <div class="sixth"><span class = "red" style="width: 60%"></span></div>
       <h1 class="topleft">1 | Scooter</h1>
       <h3 class="topright">Rock</h3>
       <h3 class="bottomleft">T 21%, C 6%</h3>
       <h3 class="bottomright">XXX</h3>
</div>
<div class="ar-image">
     <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div>
       <p class="descfirst">Progressive</p> 
       <div class="first"><span class = "green" style="width: 85%"></span></div>
       <p class="descsecond">Happy</p> 
       <div class="second"><span class = "green" style="width: 55%"></span></div>
       <p class="descthird">Creative</p> 
       <div class="third"><span class = "green" style="width: 43%"></span></div>
       <p class="descfourth">Slow</p> 
       <div class="fourth"><span class = "red" style="width: 75%"></span></div>
       <p class="descfifth">Boring</p> 
       <div class="fifth"><span class = "red" style="width: 65%"></span></div>
       <p class="descsixth">Text</p> 
       <div class="sixth"><span class = "red" style="width: 60%"></span></div>
       <h1 class="topleft">3 | ABBA</h1>
       <h3 class="topright">Rock</h3>
       <h3 class="bottomleft">T 21%, C 6%</h3>
       <h3 class="bottomright">XXX</h3>
</div>


</div>


    .article-image{
    height: 320px;
    width: 480px;
    -webkit-filter: grayscale(0) blur(0);
    filter: grayscale(0) blur(0);
    transition: .4s ease-in-out;
}

.ar-image:hover .article-image{
    -webkit-filter: grayscale(100%) blur(2px);
    filter: grayscale(100%) blur(2px);
    transition: .1s ease-in-out;
}

.ar-image{
    position: relative;
    display:inline-block;
    padding: 1%;
    width: 25.66%;

}

.ar-image > p{
    display: none;
}


.ar-image:hover > p{
    position: absolute;
    top: 0;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: .4s ease-in-out;
    line-height:150px;
    margin:0;
}

.ar-image > p.descfirst, p.descsecond, p.descthird, p.descfourth, p.descfifth, p.descsixth{
    display: none;
}

.ar-image:hover > p.descfirst{
    position: absolute;
    top: 40px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}

.ar-image:hover > p.descsecond{
    position: absolute;
    top: 80px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}

.ar-image:hover > p.descthird{
    position: absolute;
    top: 120px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}

.ar-image:hover > p.descfourth{
    position: absolute;
    top: 200px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}

.ar-image:hover > p.descfifth{
    position: absolute;
    top: 240px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}

.ar-image:hover > p.descsixth{
    position: absolute;
    top: 280px;
    left: 40px;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: .4s ease-in-out;
    line-height:25px;
    margin:0;
}


.ar-image > div.first, div.second, div.third, div.fourth, div.fifth, div.sixth{
    display: none;
}


.ar-image:hover > div.first{
  position: absolute;
  top: 40px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}

.ar-image:hover > div.second{
  position: absolute;
  top: 80px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  position: absolute;
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}

.ar-image:hover > div.third{
  position: absolute;
  top: 120px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  position: absolute;
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}

.ar-image:hover > div.fourth{
  position: absolute;
  top: 200px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  position: absolute;
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}

.ar-image:hover > div.fifth{
  position: absolute;
  top: 240px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  position: absolute;
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}

.ar-image:hover > div.sixth{
  position: absolute;
  top: 280px;
  left: 200px;
  display: block;
  height: 25px;  /* Can be anything */
  position: absolute;
  background-color: rgba(85,85,85,0.4);
  bottom: 20px; 
   right: -40px; 
   width: 45%; 
}



.ar-image > div > span.green{
  display: block;
  height: 100%;

  background-color: rgb(43,194,83);

  position: relative;
  overflow: hidden;
}


.ar-image > div > span.red{
  display: block;
  height: 100%;

  background-color: #ff4742;
  position: relative;
  overflow: hidden;
}







.ar-image > h1.topleft{
    display: visible;
    position: absolute; 
   text-align: left;
   color: #ffffff;
   top: 15px; 
   right: -40px; 
   width: 100%; 
}

.ar-image:hover > h1.topleft{
    display: none;

}

.ar-image > h3.bottomleft{
    display: visible;
    position: absolute; 
   text-align: left;
   color: #ffffff;
   bottom: 20px; 
   right: -40px; 
   width: 100%; 
}

.ar-image:hover > h3.bottomleft{
    display: none;

}


.ar-image > h3.bottomright{
    visibility:visible; 
   position: absolute; 
   text-align: left;
   color: #ffffff;
   bottom: 20px; 
   left: 440px; 
   width: 100%; 
}

.ar-image:hover > h3.bottomright{
    display: none;

}

.ar-image > h3.topright{
    visibility:visible; 
   position: absolute; 
   text-align: left;
   color: #ffffff;
   top: 15px; 
   left: 440px;
   width: 100%; 
}

.ar-image:hover > h3.topright{
    display: none;

}

悬停时图像变得模糊，一组 CSS 进度条被覆盖。我还希望每个 div 都有一个链接，但到目前为止在不破坏悬停效果的情况下实现这一点是不成功的。

有什么建议可以为整个 div 实现链接（inkl. the and ）？

更新 当我将整个 div 包装在 atag 中时，它会破坏悬停效果

【问题讨论】：

    标签： html css hover


    【解决方案1】：

    刚刚尝试使用标签包装 ar-image 似乎可行。不过我可能不明白你的问题。

    【讨论】：

    • 当我将 div 包装在 a 标签中时，它会破坏悬停效果。基本上我希望图像链接到另一个页面，但也希望覆盖在图像上的 div/span。可能我需要用链接覆盖一些东西。查看我更新的问题和图片 a 标签如何破坏网站
    • 您可以尝试查看 after 伪元素，这是进行图像叠加的常用方法。看这里：stackoverflow.com/questions/22420162/…
    • 感谢您的建议。这会在悬停时覆盖图像，但它仍然位于另一个 div/span 之后，并且无法为此设置自定义链接，对吗？任何其他建议。我尝试将每个元素 div 包装在一个 atag 中，但这不会将进度条跨度变成一个链接，而且真的很乱......还有其他想法吗？
    • 您是否尝试过使用 z-index 将一个置于另一个之上？记得在使用 z-index 时将位置设置为某个值
    • Mh，由于 :after 效果，z-index 位置与背景图像相关联。如果我将 div/span 覆盖隐藏在透明图像后面，它也在背景图像后面，因此消失了。对不起初学者的问题，但我才刚刚开始。感谢您的帮助
    猜你喜欢
    • 2013-01-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-22
    • 2014-07-20
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode