在鼠標懸停期間切換圖像

我試圖讓我的代碼在懸停在已放置的某些圖像上的過程中切換圖像。有誰知道解決方案？下面的代碼：在鼠標懸停期間切換圖像

.first-image { 
    float: left; 
} 
.first-image:hover { 
    background-image: url(0-1/0_Hover.png) 
} 
.second-image { 
    float:right; 
} 
.second-image:hover { 
    background-image: url(0-1/1_Hover.png) 
}

<div class="first-image"> 
    <a href="https://bi-na-ri-es.com/black-white"><img src="0-1/0_No_Hover.png" width="946" height="1066" alt=""/></a> 
</div> 

<div class="second-image"> 
    <img src="0-1/1_No_Hover.png" width="946" height="1066" alt=""/> 
</div>

來源

2017-02-25 unowncoder

這是你可以用jQuery做的最簡單的方法：

\t $('.first-image').mouseover(function(){ 
 
\t \t $(this).toggleClass('second-image'); \t 
 
\t }); 
 
\t $('.second-image').mouseover(function(){ 
 
\t \t $(this).toggleClass('first-image'); \t 
 
\t }); 
 
\t

.wrapper { 
 
\t background-color: coral; 
 
\t width:200px; 
 
\t height: 100px; 
 
} 
 

 
.first-image { 
 
    float: left; 
 
} 
 
.first-image:hover { 
 
    background-image: url(0-1/0_Hover.png) 
 
} 
 
.second-image { 
 
    float:right; 
 
} 
 
.second-image:hover { 
 
    bac

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
\t <div class="first-image"> 
 
\t \t \t <a href="https://bi-na-ri-es.com/black-white"> 
 
\t \t \t <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/cc/Googlewave.svg/1273px-Googlewave.svg.png" width="100" height="100" \t alt=""/> 
 
\t \t \t </a> 
 
\t </div> 
 

 
\t <div class="second-image"> 
 
\t <a href="https://bi-na-ri-es.com/black-white"> 
 
\t \t \t <img src="https://santatracker.google.com/images/og.png" width="100" height="100" alt=""/> 
 
\t \t </a> 
 
</div> 
 
</div>

來源

2017-02-26 00:03:14 Negin

我不想彼此之間的圖像切換。是否有替代方案不讓圖像在對方之間切換？當鼠標懸停在其中一個圖像上時，我只需將圖像源更改爲計算機中的其他圖像 – unowncoder

您可以將兩個圖像標記，隱藏你想用默認顯示懸停的一個，當你將鼠標懸停在父，隱藏可見圖像並顯示隱藏的一個。

.first-image { 
 
    float: left; 
 
} 
 
.second-image { 
 
    float:right; 
 
} 
 
.hover, .parent:hover img:not(.hover) { 
 
    display: none; 
 
} 
 
.parent:hover .hover { 
 
    display: inline-block; 
 
} 
 

 
/* you don't need this - just for the demo */ 
 
.hover { 
 
    background: red; 
 
}

<div class="first-image parent"> 
 
    <a href="https://bi-na-ri-es.com/black-white"> 
 
    <img src="0-1/0_No_Hover.png" width="946" height="1066" alt=""> 
 
    <img src="0-1/0-1/0_Hover.png" width="946" height="1066" alt="" class="hover"> 
 
    </a> 
 
</div> 
 

 
<div class="second-image parent"> 
 
    <img src="0-1/1_No_Hover.png" width="946" height="1066" alt=""> 
 
    <img src="0-1/1_Hover.png" width="946" height="1066" alt="" class="hover"> 
 
</div>

來源

2017-02-25 23:06:31

你不能做到這一點，因爲在你的div沒有懸停圖像覆蓋的背景圖像。你可以把透明的形象在你的DIV，讓這樣的事情：

.second-image { 
    background-image: url(0-1/1_No_Hover.png) 
} 
.second-image:hover { 
    background-image: url(0-1/1_Hover.png) 
} 

<div class="second-image"> 
    <img src="someTransparentImage" width="946" height="1066" alt=""/> 
</div>

，或者你可以從DIV中刪除圖像，並assing寬度或高度與背景圖像該div沒有懸停和其他圖像懸停

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

和CSS：

.second-image { 
    width: 946px; 
    height: 1066px; 
    background-image: url(0-1/1_No_Hover.png) 
} 
.second-image:hover { 
    background-image: url(0-1/1_Hover.png) 
}

與第一個div

來源

2017-02-25 23:07:04 pgrab86

相同

喜歡的東西this?

.image { 
    width: 100%; 
    height: 500px; 
    background-image: url(https://cdn.pixabay.com/photo/2014/03/29/09/17/cat-300572_960_720.jpg); 
} 
.image:hover { 
    background-image: url(http://az616578.vo.msecnd.net/files/2016/09/25/636104270517585477-986189690_maxresdefault.jpg); 
}

來源

2017-02-25 23:07:43

您需要使用JavaScript來切換圖像來源懸停。

但是，您可以使用CSS懸停切換的背景圖片，你設立在這裏做的 - 只是改變你的HTML和CSS位：

.image { 
 
    width: 946px; 
 
    height: 1066px; 
 
} 
 

 
.first { 
 
    float: left; 
 
    background-image: url(0-1/0_No_Hover.png); 
 
} 
 

 
.first:hover { 
 
    background-image: url(0-1/0_Hover.png); 
 
    /*just for demo*/ 
 
    border: 2px solid red; 
 
} 
 

 
.second { 
 
    float: right; 
 
    background-image: url(0-1/1_No_Hover.png); 
 
} 
 

 
.second:hover { 
 
    background-image: url(0-1/1_Hover.png); 
 
    /*just for demo*/ 
 
    border: 2px solid blue; 
 
}

<a href="https://bi-na-ri-es.com/black-white"> 
 
    <div class="first image"></div> 
 
</a> 
 

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

請注意，過去，將<div>包裝在錨標記中是不可接受的。但是，它符合HTML5，因此請將<!DOCTYPE html>添加到文件的頂部。

來源

2017-02-25 23:18:16

好了，我不知道爲什麼你想這樣做，但因爲我知道圖像出現基於在他們的來源和每個來源顯示一個圖像。所以改變src會改變圖像。我想可能是通過使用封面圖片，z-index和設置超時它的作品，但不相信如果它真的是一個很好的方式去！

.wrapper { 
 
\t width:600px; 
 
\t height: 300px; 
 
} 
 

 
.first-image { 
 
    float: left; 
 
\t \t background-image: url("http://mindfulness-praktijk.nl/wp-content/uploads/2014/12/krulboom.png"); 
 
\t \t background-size: cover; 
 
\t \t width: 300px; 
 
\t \t height: 300px; 
 
} 
 
.first-image:hover { 
 
    background-image: url("http://1.bp.blogspot.com/-5H9Od8cBl9Y/Te0yRPoVRlI/AAAAAAAAAUQ/nvXOI-MNkAc/s1600/geboorte%252Buit%252Bplaatje.png"); 
 
\t \t width: 300px; 
 
\t \t height: 300px; 
 

 
} 
 
.second-image { 
 
    float:right; 
 
\t \t background-image: url("http://1.bp.blogspot.com/-5H9Od8cBl9Y/Te0yRPoVRlI/AAAAAAAAAUQ/nvXOI-MNkAc/s1600/geboorte%252Buit%252Bplaatje.png"); 
 
\t \t width: 300px; 
 
\t \t height: 300px; 
 
} 
 
.second-image:hover { 
 
    float: left; 
 
    background-image: url(http://mindfulness-praktijk.nl/wp-content/uploads/2014/12/krulboom.png); 
 
    background-size: cover; 
 
    width: 300px; 
 
    height: 300px; 
 
\t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
\t \t <div class="first-image"></div> 
 
\t \t <div class="second-image"></div> 
 
</div>

來源

2017-02-26 08:01:07 Negin

在鼠標懸停期間切換圖像

回答

相關問題