使用圖標在圖像上創建懸停狀態

我對HTML5/Bootstrap更新，我試圖爲我的響應圖像添加基本的懸停狀態，並使它們充當按鈕。這是我目前開發的。使用圖標在圖像上創建懸停狀態

  <div align="center" class="col-sm-2"> 
      <a href="#"> 
       <picture> 
        <!--[if IE 9]><video style="display: none;"><![endif]--> 
        <source srcset="../../../img/img1.png" class="img-responsive" media="(min-width: 800px)"> 
        <!--[if IE 9]></video><![endif]--> 
        <img srcset="../../../img/img1-sm.png, ../../../img/img1-sm.png" class="img-responsive" alt="Image One"> 
       </picture> 
      </a> 
      </div>

來源

2015-04-02 Streicham16

您可以隨時使用CSS，具體取決於您希望使用懸停產生的效果。下面的代碼放在你的CSS樣式表文件，或文檔中包裹在「風格」標籤

picture img:hover{ 
/*Things to happen on hover*/ 
}

，或者你可以使用jQuery。下面的代碼進入「腳本」標籤，並可以在頁面加載時運行。

$(window).load(function(){ 
    $('picture').find('img').hover(function(){ 
     //Things to happen on hover 
    }); 
});

，使之變成一個按鈕，在鏈路包裹或使用jQuery創建點擊事件

來源

2015-04-02 20:47:27

-1

使用CSS懸停和使用jQuery使用它作爲按鈕。

$(document).ready(function(){ 
 
\t $("#myImage").click(function(){ 
 
\t \t alert("Your picture acts like a button!"); 
 
\t }); 
 
});

#myImage:hover 
 
{ 
 
\t -webkit-filter:grayscale(100%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://goo.gl/DiODcW"></script> 
 
<img src="http://goo.gl/DiODcW" class="img-responsive" id="myImage">

在上面的片段中，hover在CSS的圖像轉換成灰度圖像（你可以添加你自己的代碼）和圖像click打開一個alert箱（可以加你自己的代碼）。

，或者如果你想使用你的鏈接圖片，這樣做：

<a href="#your link"><img src="http://goo.gl/DiODcW" class="img-responsive" id="myImage"></a>

來源

2015-04-02 21:27:39

使用圖標在圖像上創建懸停狀態

回答

相關問題