Question

我正在使用HTML，CSS和Jquery，我使用手表图像进行了图像悬停效果，我希望能够在页面中心垂直向下添加相同的图像和效果，但不会让它我，这是有问题的网站！任何帮助都会很棒！

<div id="header">
    <h1></h1>
</div>
<div class="center12">
    <img src="image/logocenter1.png" alt="** PLEASE DESCRIBE THIS IMAGE **">
</div>
<div id="nav">
    <h2>
        <a href="index.html" class="rollover">Home</a> / <a href="style.html"   class="rollover">Styles & Sizes</a> / 
        <a href="brand.html" class="rollover">Brands & Prices</a> / 
        <a href="strap.html" class="rollover">Watch Straps</a> / <a href="used.html" class="rollover">Tips on buying used</a>
    </h2>
</div>
<div class="fadehover">
    <img src="image/test1.png" alt="" class="a"> <img src="image/test1bw.png" alt="" class="b">
</div>

看起来应该很简单，但它不会起作用。

Answer 1

Instead of using jquery and two images for gray scale effect, use the following:

By adding an css you can bring the same effect using a single image(no need of jquery and hover image).

Add this css:

<pre>
img.a:hover {
    filter: url("");
   }
</pre>

and remove the jquery and another gray scale image. If you don't want hover effect and the images are needs to be shown one by one down, remove one of the images inside the div and put it into a separate Div'

HTML图像垂直对齐

1 个答案: