-3

我有两个链接<a href="#">(...)</a>，每个链接都包含一个用 div 和纯 css 创建的小徽标。

我想让它们可点击，但我不能。

这是HTML：

<div id="content">
    <div id="wrappAll">
        <div id="settings">
    <input type="checkbox" group="type" id="type" name="type">
    <label for="type">

            <div class="logoButton block">
                    <a href="#" ></a>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span>
    <span class="miniblock"></span> 
</div>  
    <div class="logoButton bar" id="bar">
            <a href="#" ></a>
    <span class="minibar"></span>
    <span class="minibar"></span>
    <span class="minibar"></span>
</div>  
    <div id="photos">
         <span class="photo"></span>
      <span class="photo"></span> 
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>

      <span class="photo"></span>
        </div>  
        <div id="photos_long">
         <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
      <span class="photo"></span>
        </div>  
            </label> 
        </div>


    </div>
</div>

这是CSS：

/**/
input{opacity:0;width:120px;background:#fff;height:70px;
position:absolute;
margin:-10px 10px;}
/**/
body,html{
width:100%;
height:100%;
margin:0;
padding:0;
background:#eee;}

#content{
width:600px;
height:650px;
margin:20px auto;
    background:whitesmoke;
    border-radius:10px;
    box-shadow:inset 0 0 1px #000;  
}
#wrappAll{}
#settings{
width:600px;
height:50px;
padding:10px;
margin-top:40px;
display:block;
background:linear-gradient(top, rgba(242,242,242,1) 0%,rgba(217,217,217,1) 100%);
border-radius:10px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
box-shadow:inset 0 0 1px #000;  
}
#photos{
width:600px;
height:auto;
position:absolute;
margin-top:70px;}
#photos_long{
width:600px;
height:auto;
position:absolute;
margin-top:70px;
display:none;}

#photos_long .photo{
width:400px;
height:380px;

margin:5px auto;}
a{
    display:block;
    position:absolute;
    margin:;
    width:42px;
    height:42px;

}
/* logo button */

.block{
margin:-10px 10px;
padding:10px;
transition:all 1s ease;} 
.bar {
margin:-10px -10px;
padding:10px;
transition:all 1s ease;}
.logoButton{
width:42px;
height:50px;
float:left;
border-left:1px solid #999;
box-shadow:-1px 0 0 #fff;
transition:all 1s ease;}
.miniblock{
display:block;
width:10px;
height:10px;
    background:#ccc;
float:left;
margin:2px;
border-radius:1px;
box-shadow:inset 0 0 5px #000;
transition:all .2s ease-out;}
.logoButton:hover > .miniblock{
background:#98c6Ea;
}

.minibar{
content:'';
display:block;
width:40px;
height:8px;
background:#ccc;
margin:5px auto;
border-radius:2px;
box-shadow:inset 0 0 5px #000;
transition:all .2s ease-out;}
.logoButton:hover > .minibar{
    background:#98c6Ea;
}
/**/
.photo{
display:block;
float:left;
width:180px;
height:182px;
margin:5px;
border-radius:2px;
border:1px solid #333;
background:url(https://twimg0-a.akamaihd.net/profile_images/2563882128/5tzcaa48i6oga47d7o3s_reasonably_small.png) no-repeat;
    background-size:100% 100%;
    border:5px solid #f9faf1;
    box-shadow:0 0 1px #333, inset 0 0 1px #666;
}

/**/


.logoButton:active{
box-shadow:inset -1px 0 10px #333;}
#type:checked ~ label[for=type] #photos {display:none;}
#type:checked ~ label[for=type] #photos_long {display:block;}

此链接显示了这一点：http: //cssdeck.com/labs/collab/jmjpxul4/1

我怎样才能解决这个问题？

4

1 回答 1

0

可能是事件 onclick 和 javascript？

<div onclick="someFunction()">(....)</div>
<script type="text/javascript">
function someFunction()
{
.....
}
</script>
于 2012-09-18T17:00:39.310 回答