CSS手风琴风格的图像查看器-使第一个图像打开

Question

我使用的是纯css手风琴风格的图像查看器。

它当前打开时，所有图像都是一条长条，当其中一个图像翻转过来时，它就是全尺寸的。我希望能够在第一个（左）图像已经打开的情况下加载查看器。

这是我的代码：

HTML

<div class="accordian">
<ul>
<?php
    $args = array(
    'order'          => 'ASC',
    'orderby'        => 'menu_order',
    'post_type'      => 'attachment',
    'post_parent'    => $post->ID,
    'post_mime_type' => 'image',
    'post_status'    => null,
    'numberposts'    => -1
    );
    $attachments = get_posts($args);
    if ($attachments) {
        foreach ($attachments as $attachment) {
echo '<li><a href="#">';
        echo wp_get_attachment_image($attachment->ID, 'large', false, false);
           echo '</a></li>';
    }
} ?>
</ul>
</div><!--/accordian-->

CSS

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/
.accordian {
    width: 805px; height: 320px;
    overflow: hidden;
}
/*A small hack to prevent flickering on some browsers*/
.accordian ul {
    width: 2000px;
    /*This will give ample space to the last item to move
    instead of falling down/flickering during hovers.*/
}
.accordian li {
    position: relative;
    display: block;
    width: 160px;
    float: left;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}

.accordian li img {
 display: block;
}

Answer 1

所以首先，我喜欢你在那里的小效果：）

我用一个可能的解决方案创建了一个jsfiddle。

第一个项目的起始宽度为"悬停项目"样式。对于纯CSS，我认为不可能在鼠标离开时返回到中等状态。

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/
.accordian {
  width: 805px; height: 320px;
  overflow: hidden;
}
/*A small hack to prevent flickering on some browsers*/
.accordian ul {
  width: 2000px;
  /*This will give ample space to the last item to move
  instead of falling down/flickering during hovers.*/
}
.accordian li {
  position: relative;
  display: block;
  width: 40px; /* changed this because it looked weird keeping it at 160px */
  float: left;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
/* Set the styling of the first child */
.accordian li:first-child { width: 640px; }
/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul:hover li:hover {width: 640px;}
.accordian li img {
  display: block;
  width: 100%;
}

<div class="accordian">
<ul>
    <li>
        <a href="#">
            <img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
        </a>
    </li>
</ul>
</div>

Answer 2

这就是您想要的吗？http://jsfiddle.net/svug8d4z/

我只换了

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}

至：

/*Reduce with of un-hovered elements*/
.accordian ul li,
.accordian ul:hover li:first-child:not(:hover) {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:first-child,
.accordian ul li:hover {width: 640px;}

编辑：注意：IE8仅部分支持CSS3选择器（：not是其中之一）http://caniuse.com/#search=%3AnotIE8