Question

我目前正在使用此网站http://66.147.244.95/~crossfy6/，我在圈子中找到了一些open source code动画图标，并将其修改为我的主菜单图标。

不幸的是，直到用chrome制作它之后（如果你在chrome中查看它它完美地工作）我在其他浏览器中测试它并发现我使用的灰度滤镜在IE和Safari中不受支持。

我想知道是否还有其他办法可以达到这个效果。我想创建另一组灰色的图标图片并在悬停时转换它们，但唯一的方法是重写大部分菜单，因为所有设置为img而不是div的背景我可以改变CSS。还有其他想法吗？或者我基本上需要重新开始？我知道jquery和javascript的基础知识，但不知道如何用wordpress实现它们，这就是我正在使用的。

HTML

<div class="gridcontainer clearfix">
<div class="grid_3">
    <div class="fmcircle_out">
        <a href="http://66.147.244.95/~crossfy6/about/">
            <div class="fmcircle_border">
                <div class="fmcircle_in fmcircle_red">
                    <span  style="width:110px;" >ABOUT</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-question-mark-e1394408760835.png" style="padding-right:5px; width:63px;"  alt="" />
                </div>
            </div>
        </a>
    </div>
</div>

<div class="grid_3">
    <div class="fmcircle_out">
        <a href="http://66.147.244.95/~crossfy6/wod/">
            <div class="fmcircle_border">
                <div class="fmcircle_in fmcircle_red">
                    <span style="width:128px;">WOD</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-kettlebell-icon.png" style="width:80px" alt="" />
                </div>
            </div>
        </a>
    </div>
</div>


<div class="grid_3">
    <div class="fmcircle_out">
        <a href="http://66.147.244.95/~crossfy6/nutrition/">
            <div class="fmcircle_border">
                <div class="fmcircle_in fmcircle_red">
                    <span style="width:124px;">NUTRITION</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/apple.png" style="width:80px" alt="" />
                </div>
            </div>
        </a>
    </div>
</div>

<div class="grid_3">
    <div class="fmcircle_out">
        <a href="http://66.147.244.95/~crossfy6/rates-and-fees/">
            <div class="fmcircle_border">
                <div class="fmcircle_in fmcircle_red">
        <span>RATES</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-wallet.png" style="margin-top:27px" alt="" />
                </div>
            </div>
        </a>
    </div>
</div>



<div class="grid_3">
    <div class="fmcircle_out">
        <a href="http://66.147.244.95/~crossfy6/schedule/">
            <div class="fmcircle_border">
                <div class="fmcircle_in fmcircle_red">
                    <span style="padding-left: 5px;">SCHEDULE</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-calendar.png" alt="" />
                </div>
            </div>
        </a>
    </div>
</div>

CSS：

/* -- Circular Work -- */
.gridcontainer {
    width: 960px;
    margin: 0px auto;
}

.grid_3 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 50px;
    width: 170px;
}

.grid_9 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    width: 700px;
}

.fmcircle_out {
    width: 138px;
    height: 138px;
    background-color:#dd2027;
    text-align: center;
    display: block;
    margin-left: 10px;
    opacity: 1; 


    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.fmcircle_out:hover {
    opacity: 1; 


    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

/*
.fmcircle_out:hover .fmcircle_in img {
    margin: 20px;
    width: autopx;
    height: 90px;

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
*/

.fmcircle_in {
    width: 130px;
    height: 130px;
    margin: 4px;
    display: inline-block;
    overflow: hidden;
    -webkit-filter: grayscale(100%);

    border-radius: 85px;
    -moz-border-radius: 85px;
    -webkit-border-radius: 85px;
    -o-border-radius: 85px;

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.fmcircle_out:hover .fmcircle_in {
    width: 130px;
    height: 130px;
    margin: 4px;
    display: inline-block;
    overflow: hidden;

    -webkit-filter: grayscale(0%);  
    border-radius: 85px;
    -moz-border-radius: 85px;
    -webkit-border-radius: 85px;
    -o-border-radius: 85px;

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.fmcircle_in img {
    border: none;
    margin: 23px;
    width: auto;
    height: 85px;


    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.fmcircle_in span {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    width: 120px;
    background: none;
    color: #000;
    font-size:20px;
    padding: 0px;
    margin: 52px 0 0 0px;
    height: 20px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    float: left;
    position: absolute;
    opacity: 0;

    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.fmcircle_out:hover .fmcircle_in span {
    opacity: 1;



    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

任何和所有帮助/洞察力赞赏！谢谢！

Answer 1

使用以下内容创建名为filters.svg的文件： -

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

添加css代码

.fmcircle_in{
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
.fmcircle_out:hover .fmcircle_in {
filter: none;
    -webkit-filter: grayscale(0);}

将以下内容添加到IE

的css代码中

.fmcircle_in span {filter: alpha(opacity=0);}

.fmcircle_out:hover .fmcircle_in span{filter: alpha(opacity=100);}

在悬停时更改图像颜色的替代方法（过滤器不工作）

1 个答案: