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 和一个可能的解决方案。

第一项的起始宽度为 'hovered item' 样式。对于纯 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=%3Anot IE8

CSS 手风琴风格图片查看器 - 打开第一张图片

CSS Accordion Style Image Viewier - Make first image open

css

accordion