项目场景:
点击切换图片,同时需要hover的时候先展示效果
问题描述:
问题出现在hover的时候改变图片划过去变回原样冲突,本来点击已经切换了图片但是hover划走的时候图片又给切换回去了
解决方案:
hover的时候判断点击切换样式的class名有没有添加上,添加上就不进行便会操作即可
<button id="buttonimg" :class="sortordtype==1?'sortordstyle':''" @click="sortordclick(1)">最新
<img :src="sortordtype==1 ? xiabimg2 : xiabimg" alt="">
</button>
<button id="buttonimg" :class="sortordtype==2?'sortordstyle':''" @click="sortordclick(2)">销量
<img :src="sortordtype==2 ? xiabimg2 : xiabimg" alt="">
</button>
import xiab from "../assets/image/homeclassify/xiab.png";//图片引入
import xiab2 from "../assets/image/homeclassify/xiab2.png";
$(".c-sortord #buttonimg").hover(
function () {
console.log($(this).hasClass("sortordstyle"));
$(this).find("img").attr("src", xiab2);
},
function () {
if ($(this).hasClass("sortordstyle")) {//sortordstyle样式class名
} else {
$(this).find("img").attr("src", xiab);
}
}
);