堆棧內存溢出
  簡體   English   中英

懸停時更改圖像

[英]Changing image on hover

 原文  2012-06-04 19:08:04  3   10    javascript/ jquery/ html/ css

問題描述

我需要一個由圖像組成的菜單，當有人將鼠標懸停在它周圍時，圖像應該會發生變化。

HTML

<div id="menu" >  
    <a href="#" id="home"><img  src="images/about.png" alt="logo" /></a>
</div>

CSS

#menu {
        margin-left    : 353px;
        margin-top     : -70px;
        padding-bottom : 16px;
}

#home {
        background     : transparent url(images/about.png);
        z-index        : 1;
}

#home:hover {
        background     : url(images/aboutR.png);
        z-index        : 2;
}

我面臨的問題是，當我將鼠標懸停在菜單項周圍時，懸停時要顯示的圖像顯示在舊圖像的背面。 而且，顯示的懸停背景圖像的寬度和高度都非常小。 請幫忙。 謝謝

10 個解決方案

解決方案1
 26  2012-06-04 20:47:33

如前所述，不需要 JS 解決方案。

另一種方法是加載圖像並使用:hover事件隱藏/顯示它們。 像這樣的東西：

HTML：

<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>

CSS：

.image_off, #home:hover .image_on{
   display:none
}
.image_on, #home:hover .image_off{
   display:block
}

解決方案2
 18  2012-06-04 19:38:11

這是一個 js/jquery 解決方案

//should go inside your <head> tag
function onHover()
{
    $("#menuImg").attr('src', 'images/aboutR.png');
}

function offHover()
{
    $("#menuImg").attr('src', 'images/about.png');
}

html：

<div id="menu" >  
  <a href="#" id="home">
    <img id="menuImg" src="images/about.png" alt="logo" onmouseover="onHover();" 
      onmouseout="offHover();" />
  </a>
</div>

這是一個工作示例。 快樂編碼:)

解決方案3
 4 已采納  2012-06-04 19:48:19

將此代碼放在結束正文標記之前，

<script  type='text/javascript'>
$(document).ready(function(){
    $(".home").hover(
        function() {$(this).attr("src","images/aboutR.png");},
        function() {$(this).attr("src","images/about.png");
    });
});
</script>

將類 home 放在img標簽中。 完畢。 完美運行。

解決方案4
 3  2012-06-04 19:38:36

這有效：

<html>
<head>
<title>Example</title>
<style type="text/css">
#menu {
    width: 400px;
    height: 142px;
    margin-left: 353px;
    margin-top: -70px;
    padding-bottom: 16px;
}

#menu:hover {
    background: url(lPr4mOr.png);
    background-repeat: no-repeat;
}
</style>
</head>
<body>
    <div id="menu">
        <a href="#" id="home"><img src="lPr4m.png" alt="logo" /></a>
    </div>
</body>
</html>

（為了方便制作頁面，圖像名稱已更改。）

解決方案5
 2  2012-06-04 19:12:29

您調用<img src="images/about.png" alt="logo" />兩次，一次在 html 中，一次在 css 中。 我建議刪除 html 並嚴格使用 css 背景圖像。 您也不需要 z-index。

解決方案6
 2  2012-06-04 19:12:48

刪除img標簽，並將#home （和任何其他菜單項）的寬度和高度設置為圖像的寬度和高度。

此外，將內容設置為圖像的任何alt （出於可訪問性目的），然后設置text-indent屬性，使其移出頁面。

目前，當您懸停時，它正在更改背景圖像，但img標簽在頂部，並且始終如此。

HTML

<div id="menu" >  
  <a href="#" id="home">Home</a>
</div>

CSS

#menu{
  margin-left: 353px;
  margin-top: -70px;
  padding-bottom: 16px;
}
#home{
  background:transparent url(images/about.png);
  width: 400px;
  height: 142px;
  z-index:1;
  text-indent: -9999em;
}
#home:hover{
  background:url(images/aboutR.png);
  z-index:2;
}

解決方案7
 2  2012-06-04 19:13:16

你可以做 a:hover img{display:none} 這將擺脫 img, idk 關於尺寸問題 bc 你沒有指定尺寸。 如果我是你，我要么放棄 img 元素，將其用作元素的背景圖像，然后在 :hover 上更改它。 或者，如果您想要 img 元素，請遵循與上述相同的原則使用 clip 屬性

解決方案8
 2  2012-06-04 20:18:12

您需要在使用z-index規則時使用position規則。 嘗試在您使用z-index地方添加position:relative 。

解決方案9
 1  2012-06-04 21:22:08

你只是想做一個簡單的圖像翻轉嗎？ 沒有看到工作示例，我無法確切地弄清楚您要做什么，但是使用 CSS 精靈很容易實現圖像翻轉，不需要 jquery，這使得網站更加防彈。 它還使您的網站響應更快，因為默認圖像和超狀態圖像是相同的圖像，無需預加載代碼。

如果您需要映射圖像（而不是完全交換），則可以使用背景圖像、容器 div 和 png-24 圖形來完成（使 png-24s 在 IE6 中工作所需的 javascript，但誰在乎不再支持 IE6反正？）。

在不使用 javascript 的情況下更改導航圖像的一個好方法是使用 background-position 屬性，如下所示：

    // define your container element
    #nav-home {  
         margin: 20px 5px;  
         height: 15px; 
         width: 40px;
          }

    // use a descendant selector to style the <a> tag
    #nav-home a { 
         background-image: url("/images/buttons-nav.gif"); 
         display: block; // THIS IS VERY IMPORTANT!!
         background-position: 0 0;  // the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner
         height: 15px; 
         }

    // this is where you change the position of the background for the hover state
    #nav-home a:hover { 
         background-position: -20px 0; //this moved it 20px to the right 
         }

您的 html 代碼如下所示：

    <div id="nav-home"><a href="/yourlink/"><img src="/images/transparent.gif" alt="home" height="100%" width="100%;"></a>
    <!-- uses a 1px transparent gif to "hold" the place of the actual clicked item -->

您的圖像實際上將同時包含打開和關閉狀態，如下所示： http : //www.w3schools.com/css/img_navsprites_hover.gif那么您所做的就是將圖像移動到一側以顯示 :hover 狀態。 （代碼示例在http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav ）。 您基本上是在制作一個帶有容器 div 的窗口，然后只顯示實際背景圖像的一部分。

另外，不要在標簽以外的任何東西上使用 :hover ，因為並非所有瀏覽器都支持在塊級元素上使用 :hover 。

解決方案10
 0  2019-08-27 04:49:47

現在以簡單的方式：

<img id=logo src=img1.png onmouseover=logo.src='img2.png' onmouseout=logo.src='img1.png'>

此 HTML 將在鼠標懸停時將圖像更改為新圖片，並在鼠標移開時將其恢復為第一張圖片。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery .hover（）不更改圖像 懸停時更改鏈接圖像 如何在懸停時實現圖像變換？ Vuejs 在 hover 上更改圖像 src 用javascript懸停時更改圖像 懸停更改圖像會更改整行圖像 更改圖片上的圖片文件路徑：懸停 在div中其他元素懸停時更改圖像不透明度 懸停更改后將圖像恢復為原始圖像嗎？ 使用淡入淡出在懸停和返回時更改圖像
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM