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。

第一个项目包含＆＃39; hovered item＆＃39;造型开始宽度。使用纯CSS我不认为有可能在鼠标离开时回到中等状态。

＆＃13;

/*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%;
}

＆＃13;

<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>

＆＃13;

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选择器（：不是其中之一）http://caniuse.com/#search=%3Anot IE8

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

2 个答案: