：與圖像的div hover樣式，這並不觸發

我一直試圖做一個網站上覆蓋懸停效果純CSS：與圖像的div hover樣式，這並不觸發

     <div class="col-md-4 port-show"> 
          <img class="img-responsive" alt="" src=""> 
          <h2 class=""></h2> 
          <ul> 
           <li></li> 
           <li></li> 
          </ul> 
         </div>

但我碰到的問題當我徘徊通過覆蓋圖不會觸發的img。我知道我必須以不同的方式去做，但現在不要這麼做。 CSS：

:hover:after{ 
     content: ""; 
     z-index: 10; 
     display: block; 
     position: absolute; 
     height: 100%; 
     top: 0; 
     left: 0; 
     right: 0; 
     background: red; 
     border-radius: 6px; 
     border-color: transparent; 
    }

來源

2016-09-21 Mads I

哪個元素，你徘徊？ –

不要以爲你可以在圖像上做一個後處理，因爲它將元素放置在元素的末端（內部），而img標記不能包含子元素，而且當你完全定位後，你必須使img相對 – Pete

@JayGhosh我試圖懸停div，但是當我有點太快並將鼠標懸停在圖像上時，我的懸停效果不起作用。 –

你可以看這裏。也許這個解決方案對你有幫助。

http://codepen.io/anon/pen/VKmxZw

.img-holder { 
 
    position: relative; 
 
    z-index: 1; 
 
    display: block; 
 
    width: 350px; 
 
} 
 
.img-holder img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.img-holder:after { 
 
    content: " "; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    z-index: 2; 
 
    left: 0; 
 
    top: 0; 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 
.img-holder:hover:after { 
 
    opacity: 1; 
 
}

<div class="col-md-4 port-show"> 
 
    <span class="img-holder"> 
 
    <img src="http://placehold.it/350x150" /> 
 
    </span> 
 
    <h2 class=""></h2> 
 
    <ul> 
 
    <li></li> 
 
    <li></li> 
 
    </ul> 
 
</div>

來源

2016-09-21 07:57:24 mtch9

謝謝！皮特，我相信這可能解決了我的難題：D –

-1

您可以按照這一點，並讓您的疊加效應

@import url(http://fonts.googleapis.com/css?family=Open+Sans); 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 

 
a { 
 
    color: inherit; 
 
    text-decoration: none; 
 
} 
 

 
h2 { 
 
    color: #c55; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
} 
 

 
.container { 
 
    background: url("http://static.pexels.com/wp-content/uploads/2015/03/fog-forest-haze-4827-524x350.jpeg"); 
 
    background-size: cover; 
 
    background-position: center; 
 
    position: relative; 
 
    margin: auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
} 
 
.container:hover .overlay { 
 
    opacity: 1; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.container:hover .overlay span { 
 
    opacity: 1; 
 
    -webkit-transition: 1.3s ease; 
 
    transition: 1.3s ease; 
 
} 
 
.container .overlay { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    position: absolute; 
 
    margin: auto; 
 
    width: 0px; 
 
    height: 0px; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    opacity: 0; 
 
    -webkit-transition: .3s ease; 
 
    transition: .3s ease; 
 
} 
 
.container .overlay span { 
 
    color: #fff; 
 
    text-align: center; 
 
    position: absolute; 
 
    margin: auto; 
 
    width: 180px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    opacity: 0; 
 
}

<h2>Image Overlay Hover Effect</h2> 
 
<div class="container"> 
 
    <a href="#"> 
 
    <div class="overlay"> 
 
     <span>Click to see more...</span> 
 
    </div> 
 
    </a> 
 
</div>

來源

2016-09-21 07:45:04

-1

一些簡單的疊加代碼：

<!DOCTYPE html> 
<html > 
<head> 
<style type="text/css"> 
    .pic{ width:190px; 
    height:190px; opacity: 1; 
    filter: alpha(opacity=100); 
    background: url(http://www.corelangs.com/css/box/img/duck.png) no-repeat; } 
    .pic:hover { opacity: 0.3; filter: alpha(opacity=30);} 
</style> 
</head> 
<body> 
<div class="pic"> 
</div> 
</body> 
</html>

來源

2016-09-21 07:55:13

：與圖像的div hover樣式，這並不觸發

回答

相關問題