CSS只有slider-按鈕激活狀態繼承懸停背景顏色？

大家好！我猜這可能輪到我們是一個非常愚蠢的問題，但我已經封鎖...有一個鏈接到JS撥弄着一個非常簡單的CSS只圖像滑塊。我想實現的是選擇某一圖像時，我想coresponding框下方保持橙色。任何提示將高度appreaciated :)

這裏是我的代碼：

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style type="text/css"> 
    body 
    { 
     text-align: center; 
    } 

    #images 
    { 
     width: 300px; 
     height: 300px; 
     overflow: hidden; 
     position: relative; 
     margin: 20px auto; 
     background-color:#ffffff; 
    } 

     #images img 
     { 
      background-color:#ffffff; 
      width: 300px; 
      height: 300px; 
      position: absolute; 
      top: 0; 
      left: -400px; 
      z-index: 1; 
      opacity: 0; 
      transition: all linear 500ms; 
      -o-transition: all linear 500ms; 
      -moz-transition: all linear 500ms; 
      -webkit-transition: all linear 500ms; 
     } 

      #images img:target 
      { 
       left: 0; 
       z-index: 9; 
       opacity: 1; 
      } 

      #images img:first-child 
      { 
       left: 0; 
       opacity: 1; 
      } 
    #slider 
    { 
     width:300px; 
     margin-left:auto; 
     margin-right:auto; 
    } 
    #slider a 
    { 
     font-family: 'Segoe UI', 'Century Gothic', sans-serif; 
     text-decoration: none; 
     background: #808080; 
     padding: 1% 7% 1% 7%; 
     color: #808080; 
     display:inline-block; 
     margin-bottom:10px; 
    } 

     #slider a:hover 
     { 
      background: #ff6a00; 
      color: #ff6a00; 
     } 
    #shadowbox 
    { 
    border-radius: 10px; 
    -o-border-radius:10px; 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    padding-top:5px; 
    padding-bottom:5px; 
    width: 400px; 
    height: auto; 
    box-shadow: #808080 0 0 7px; 
    margin-left:auto; 
    margin-right:auto; 
    } 
</style> 
</head> 
<body> 
<div id="shadowbox"> 
<div id="images"> 
    <img id="image1" src="A-06.png" /> 
    <img id="image2" src="A-07.png" /> 
    <img id="image3" src="A-05.png" /> 
    <img id="image4" src="Images_Test-01.png" /> 
</div> 
<div id="slider"> 
    <a href="#image1">.</a> 
    <a href="#image2">.</a> 
    <a href="#image3">.</a> 
    <a href="#image4">.</a> 
</div></div> 
</body> 
</html>

來源

2013-06-06 Betty Carlton

這些箱子都留下灰色。你的意思是他們應該保持橙色呢？ – feeela

是啊，我的意思是橙色:)我的壞... –

我加了jQuery代碼，這將有助於你

$(document).ready(function(){ 
    $("a").click(function(){ 
    $("a").css("background-color","#808080"); 
     $(this).css("background-color","#ff6a00"); 
    }); 
});

看到在顯示圖像時DEMO

來源

2013-06-06 10:16:17 Aravind30790

這將與JS容易的，當然。獨自一人我能想到用CSS來做到這一點的唯一方法是將圖像放置<a> S的內部，從而使按鈕可以共享:target狀態。所以，涉及一些重新編碼。 :-)

來源

2013-06-06 09:24:54

謝謝你，但我想我會再補充JS和結束「話劇」 :) –

是的......正如他們所說，「選擇你的戰鬥」。 :-) –

CSS只有slider-按鈕激活狀態繼承懸停背景顏色？

回答

相關問題