Question

我有一个带有图像的标签，我希望这样做，当你悬停/选择标签时，图像会变为另一个图像，然后当你取消选择/取消悬停时，它会变回原始图像。
当您在选项卡上悬停/选择时，我想将图像从Icon20.png更改为Icon10.png
这是选项卡的代码

$('#one').hover(function(){
            $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
    $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});
$('#one').click(function(){
            $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
    $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});

div.tab {
	overflow: hidden;
	border: 1px solid #336699;
	background-color: #336699;
	font-family: "Lato", "Sans-Serif";
}
div.tab button {
	background-color: #336699;
	float: left;
	border: #FFF;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	color: #fff;
	font-family: "Lato", "Sans-Serif";
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
}
div.tab button:hover {
	background-color: #FFFFFF;
	color:#336699;
}

div.tab button.active {
	background-color: #fff;
	color:#336699;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
<button id="one" class="tablinks" aria-label="LDS Vacuum Shopper Links" >
<img src="https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png" height="20" width="20" title="LDS Logo" id="two" name="two"> 
		Vacuum Shopper
	</button>
  </div>

更新：搜索后我找到了这些JSFiddle：First JSFiddle和Second JSFiddle 我将两者中的元素组合在一起，在代码片段中创建了JQuery。

Answer 1

搜索后我找到了这些JSFiddle：First JSFiddle和Second JSFiddle 我将两者中的元素组合在一起，在代码片段中创建了JQuery。

$('#one').hover(function(){
        $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});
$('#one').click(function(){
        $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});

当您将鼠标悬停在标签上时，图片会发生变化

1 个答案: