-2

我想要实现的是有一个图像拇指网格，当将鼠标悬停在上面时，将显示拇指的彩色版本。使用下面的代码我已经完成了，但是它只适用于精确正方形的图像；1:1 的比例。如果使用矩形图像，所有地狱都会崩溃。当然，如果我明确指定顶部边缘像素值，一切都可以正常工作，但我希望拇指调整大小，因此宽度为 100%；

关于如何返工我的 css 的任何提示？

CSS

ul#project-grid{list-style: none; list-style-image: none; padding: 0;}
    #project-grid li{float:left; position: relative; height:auto; margin: 0 1%; width: 23%;}

.project-thumb-container{background-color:#ffffff; margin:0 auto; padding: 12%; position: relative;}
.project-thumb-container img{width:100%; display:block; z-index:0; position: relative;}
.project-thumb-container img.colour{margin-top:-100%; opacity: 0;}
.project-thumb-container img.grey{filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Google Chrome Canary */ filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ }

HTML/PHP

<ul id="project-grid" class="container cf">
    <li>
        <div class="project-thumb-container">
            <img class="grey" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
            <img class="colour" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
        </div>
    </li>
    <li>
        <div class="project-thumb-container">
            <img class="grey" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
            <img class="colour" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
        </div>
    </li>
    <li>
        <div class="project-thumb-container">
            <img class="grey" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
            <img class="colour" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
        </div>
    </li>
    <li>
        <div class="project-thumb-container">
            <img class="grey" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
            <img class="colour" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
        </div>
    </li>
    <li>
        <div class="project-thumb-container">
            <img class="grey" src="<?php echo base_url(); ?>assets/test_thumb.png" />
            <img class="colour" src="<?php echo base_url(); ?>assets/test_thumb.png" />
        </div>
    </li>
</ul>

编辑：

为什么没有margin-top:-100%；在矩形拇指上工作？我不明白为什么我的问题被否决了...

4

1 回答 1

0

您是否尝试过使用 jquery 添加和删除灰色类而不是使用 2 个图像？在我的 jsfiddle 上，我只对前 2 项进行了更改：http: //jsfiddle.net/jennift/NcPEw/

<div class="project-thumb-container">
    <img class="grey" src="yourimagesource" />   
</div>

jQuery：

$(function() {
    $('.project-thumb-container > img').hover(
        //over
        function(){
            $(this).removeClass('grey');
        },
        //out
        function() {
            $(this).addClass('grey');
    });        
});

但是，如果你真的只想要 css ，不要 js ：

http://jsfiddle.net/jennift/HJmxm/1/

<div class="project-thumb-container">
    <img src="http:yoursource" />   
</div>

CSS：

.project-thumb-container img{
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Google Chrome Canary */ 
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
}

.project-thumb-container img:hover{
    filter: none;
    -webkit-filter: none;
}
于 2013-05-29T06:25:22.693 回答