Html 如何在Texbox中制作翻转图像？

我看过这个网站www.entireweb.com 我想知道我们怎么能让搜索框中的“Magnyfying镜头”像那样翻转过来

如果您注意到它有3个图像

我知道如何做两个翻滚，但我将把第三个放在哪里

谢谢

---

如果您的空闲时间：p

有3个选择器需要考虑，请对其进行编码

：悬停

：活动的

然后是链接/按钮的默认状态

你可以在这里看到它的作用

只是用图像做了个例子

---

有3个选择器需要考虑

：悬停

：活动的

然后是链接/按钮的默认状态

你可以在这里看到它的作用

只是用图像做了个例子

---

第三步是在鼠标向下和鼠标向上完成的

$('#maglensid').mousedown(function(){
    //swap to pressed image
}).mouseup(function(){
    //swap to normal image
}).hover(function() {
    //swap to hover image
}, function() {
    //swap to normal image
});

---

第三个是在mousedown和mouseup上完成的

$('#maglensid').mousedown(function(){
    //swap to pressed image
}).mouseup(function(){
    //swap to normal image
}).hover(function() {
    //swap to hover image
}, function() {
    //swap to normal image
});

---

这是他们的css，他们只是移动一个关于使用css背景属性的精灵图像。默认位置、悬停位置和活动（即单击）位置

.web #front_logo, .web #search_form, .web #search {
   background-image: url("../skin_web_glare.png");
}

#search {
    background-position: -340px -70px;
    cursor: pointer;
    height: 44px;
    margin: 4px 0 0 7px;
    width: 43px;
}

#search:hover {
    background-position: -390px -70px;
}

#search:active, #search.active {
    background-position: -440px -70px;
}

---

因此，我认为他们实际上并没有使用任何jquery/javascript，只是使用css（应该是这样：）。

这是他们的css，他们只是移动了一个关于使用css背景属性的精灵图像。默认位置、悬停位置和活动（即单击）位置

.web #front_logo, .web #search_form, .web #search {
   background-image: url("../skin_web_glare.png");
}

#search {
    background-position: -340px -70px;
    cursor: pointer;
    height: 44px;
    margin: 4px 0 0 7px;
    width: 43px;
}

#search:hover {
    background-position: -390px -70px;
}

#search:active, #search.active {
    background-position: -440px -70px;
}

---

因此，我认为他们实际上并没有使用任何jquery/javascript，只是使用css（应该是这样：）。

什么mag lens？我在Chromethank中看不到上帝在搜索框中有另一个搜索引擎美化镜头！放大镜实际上不在文本字段中。它的样式看起来就像是文本字段的一部分。什么mag镜头？我在Chromethank中看不到上帝在搜索框中有另一个搜索引擎美化镜头！放大镜实际上不在文本字段中。它的样式只是看起来像是文本字段的一部分。谢谢，我会尝试。任何示例？？我正在尝试制作一个，但JSFIDLE没有表现出来，请稍等，欢迎使用，ps刚刚制作了一个带有图像的示例看一看谢谢我会尝试的。任何示例？？我正在尝试制作一个，但JSFIDLE没有表现给它一点时间，它将受到您的欢迎，ps刚刚制作了一个带有图像的示例看一看