與CSS混淆：圖像按鈕懸停工具提示和圖像更改時懸停

-4

我理解的基本CSS.In碎片。與CSS混淆：圖像按鈕懸停工具提示和圖像更改時懸停

我試圖理解如何將所有我想要的東西結合在一起。我想創建兩種類型的按鈕，「查看」和「保存」。我有4個圖像，每個有兩個，其中一個代表按鈕，另一個代表鼠標懸停它。所以我想要一個替代背景時懸停。

我也希望有一個提示，一些「便宜」喜歡「查看文件」，「保存文件」，即更好地解釋了圖像的內容，如果它不夠明確。

據我所知，我需要使用懸停屬性，背景屬性，並以某種方式創建工具提示。這兩個按鈕實際上是帶有鏈接的圖像如何將它們結合在一起？

來源

2013-07-29 buddy123

你有什麼這麼遠嗎？顯示你現在擁有的一些CSS不是爲你做的嗎？ –

留下一些代碼... –

你可以做這樣的事情：

<div title="View File" class="view-button"> 
    View File 
</div>

CSS：

.view-button { 
    background-image: url("first-view-image"); 
} 

.view-button:hover { 
    background-image: url("second-view-image"); 
}

與同爲保存按鈕。 title標籤顯示一個小工具提示。如果你想要更大或更漂亮的工具提示，你必須使用一些javaScript框架。

來源

2013-07-29 06:52:28 bmurauer

Jquery Tool-tip會幫助你通過它，只需按照下面的例子：http://jqueryui.com/tooltip/ –

檢查了這一點

HTML

<button>Hello</button>

CSS

button { 
    background: url(your-image.png) no-repeat; 
} 

button:hover { 
    background: url(your-image-hovered.png) no-repeat; 
} 

button:focus { 
    background: url(your-image-focused.png) no-repeat; 
}

來源

2013-07-29 06:58:25 SAGA

嗨，我已經創建了一個搗鼓你。當您將圖片/按鈕懸停時，您還會看到一個小小的提示，提示「點擊此處保存」。這就是你需要的一切嗎？告訴我這是否有助於您或您有任何問題。

EXAMPLE

HTML

<a href="#" class="save" title="Click here to Save"></a>

CSS

  .save { 
      margin-bottom: 10px; 
      width: 47px; 
      height:20px; 
      display:block; 
      background:transparent url('http://www.mtsworld.com/images/button_submit.gif') center top no-repeat; 
      } 

      .save:hover { 
       background-image: url('http://www.ecdoe.gov.za/ecdoe/graphics/buttons/submit.png'); 
      }

來源

2013-07-29 07:00:28 Thanos

這是我的榜樣，改變背景值到你的形象，使用工具提示我使用jQueryUI的 Example

HTML

<a href='#' class='button savebutton' title='Save form'>Save</a> 
<a href='#' class='button cancelbutton' title='Cancel action'>Cancel</a>

CSS

.button{ 
    background : #999; 
    padding : 5px 10px; 
    border-radius : 5px; 
    color:#fff; 
    text-decoration : none; 
} 
.savebutton{ 
    background : blue; 
} 
.cancelbutton{ 
    background : orange; 
} 

.savebutton:hover{ 
    background : cyan; 
} 
.cancelbutton:hover{ 
    background : yellow; 
} 
.ui-tooltip { 
    padding: 8px; 
    position: absolute; 
    z-index: 9999; 
    max-width: 300px; 
    -webkit-box-shadow: 0 0 5px #aaa; 
    box-shadow: 0 0 5px #aaa; 
} 
body .ui-tooltip { 
    border-width: 2px; 
}

$('.button').tooltip();

來源

2013-07-29 07:06:04 StupidDev

與CSS混淆：圖像按鈕懸停工具提示和圖像更改時懸停

回答

相關問題