Question

我目前正在为我的平面设计工作建立一个网站。在我的主页上，我有一些图像显示我的工作。我希望能够将鼠标悬停在图像上，以便显示项目名称以及它所属的类别。我已经研究过你可以使用html，使用以下代码 -

<a href="TARGET URL GOES HERE">
    <img src="URL OF FIRST IMAGE GOES HERE"
       onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
       onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
    </img>
</a>

然而，当我尝试这个时，它在预览中没有用，我已经听说过这种方法可能会导致问题并且是相当古老的学校。

我还读过你可以使用CSS方法创建一个图像，其中两个图像是你想要彼此相邻的。

但是，如果我这样做，将文本放在翻转以及链接上会很容易。例如，在滚动图像上，我将使用HTML和链接制作文本，但是使用CSS方法这很容易吗？

这是一个使用此方法的网站 -

http://www.equisgarcia.com

Answer 1

此问题有多种方法，具体取决于您的需求。

我只用了一种方法，用一种方法做了一个小提琴， you can see it working here.

您所需要的只是：

1）定义父元素＆＃34; parentExample＆＃34;包含图像和大小的文本。 2）定义图像＆＃34; imageExample＆＃34;和文字＆＃34; textExample＆＃34;覆盖所有父级大小并将文本设置为默认隐藏。 3）定义一个悬停＆＃34; parentExample：hover＆＃34;隐藏图像和文本显示。

.parentExample {
    height: 400px;
    width: 400px;
}
.imageExample {
    height: 100%;
    width: 100%;
}
.textExample {
    height: 100%;
    width: 100%;
    display: none;
}

.parentExample:hover .imageExample {
    display: hidden;
}
.parentExample:hover .textExample {
    display: block;
}

Answer 2

图片

div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }

悬停时显示不同的图像

div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }

如果元素是一个锚点或者用它定义了一些onclick函数..在select中使用新类显示不同的图像

div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }

Answer 3

这就是网站上的第一个图形图像是如何在HTML中完成的：

<html>
<head>
<title></title>
</head>

<body>
    <div id="pr_contain_item_7129129">
        <a class="nohover" href="/New-Year-s-Card" id="p7129129" name=
        "equisgarcia" onfocus="this.blur()" onmouseout=
        "this.className='nohover';" onmouseover="this.className='hover';" rel=
        "history"></a>

        <div class="loader_holder" id="load_7129129"><img src=
        "/_gfx/loadingAnim.gif"></div>

        <div class="cardimgcrop" id="cardthumb_7129129"><img border="0"
        data-hi-res=
        "http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506_2x.jpg"
        height="169" src=
        "http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
        width="300"></div>

        <div class="thumb_title">
            <span class="text">New Year's Card</span>&nbsp;
        </div>

        <div class="excerpt">
            Fig.ω
        </div>

        <div class="thumb_tag">
            <span class="text"><a href=
            "http://www.equisgarcia.com/filter/Lettering">Lettering</a>,
            <a href=
            "http://www.equisgarcia.com/filter/Print">Print</a>&nbsp;</span>
        </div>
    </div>
</body>
</html>

Answer 4

你是一个使用精灵;在CSS中使用background-position-x，-y属性。

<div class="image"></div>

CSS：

div.class {
    background-image: url('../img/image.jpg'); 
}

div.class:hover {
    background-x: -100px;
}

提供您创建的精灵图像（两个或多个图像合二为一）。在悬停时，您实际上会将图片偏移100px以显示另一张图片。

Answer 5

您可以使用javascript和html以及css执行此操作，如下所示：

<html>
    <style type="text/css">
        #sam{
            height: 100px;
            width: 100px;
background-color:#ccc;
        }
        #sam:hover{
            background-color: #eee;
        }
    </style>
<head>

    <script type="text/javascript">

        var change = function(){
            var x = document.getElementById("sam");
            x.innerHTML = "this is new";

        }
        var changeanother = function(){
            var x = document.getElementById("sam");
            x.innerHTML = " ";
        }   
    </script>
</head>
<body>
    <div id="div2"></div>
    <div id="sam" onmouseover="change();" onmouseout="changeanother();"> </div>
</body>
</html>

使用innerHTML帮助您对标签进行更多控制。

你也可以使用div标签的img tage。

如你所愿

你如何使用html / css进行图像翻转？

5 个答案: