1. 首頁
  2. 問答
  3. 鏈接了分度，背景圖片和懸停效果

鏈接了分度，背景圖片和懸停效果

2017-06-21 74 views
0

我的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都有一個鏈接，但迄今爲止沒有成功實現這個功能而沒有打破懸停效果。 Before HoverAfter hover

任何建議如何實現整個div（inkl。the和）的鏈接？

UPDATE 當我整個包住格在它breajs懸停EFFEKT的ATAG enter image description here

來源

2017-06-21 Jan

回答

1

剛試過，並用標籤包裝AR-圖像似乎工作。我可能不會理解你的問題。

來源

2017-06-21 19:50:47

+0

當我將div封裝在標籤中時，它會打破懸停效果。基本上我希望圖像鏈接到另一個頁面，但也覆蓋在圖像上的div/span。 也許我需要在鏈接上覆蓋一些東西。看到我的更新questin與圖像如何標記打破了網站 – Jan

+0

你可以嘗試尋找後僞元素，這是一種常見的方式來做圖像疊加。看到這裏：https://stackoverflow.com/questions/22420162/image-overlay-using-after-pseudo-element#22420195 –

+0

謝謝你的建議。在懸停時疊加了一張圖片，但仍然位於其他div/span的後面，並且無法爲此設置自定義鏈接，對不對？任何其他建議。 我試過包裝每個元素div，跨越一個atag，但這並不能將進度條跨度變成一個鏈接，真的很混亂......任何其他想法？ – Jan

相關問題

 相關問題