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-按钮激活状态继承悬停背景颜色？

回答

相关问题