[英]Change image src onmouseover div
我想在鼠標懸停在 div-12 上時更改 img 的 src。 我怎樣才能做到這一點?
<div class="row">
<div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
<a href="{{ action('') }}" id="link-settings" href="">
<div id="block-settings" class="col-xs-2 button-left-premium">
<img class="button-img" src="{{ asset('/img.png') }}"></img>
</div>
<div class="col-xs-5 button-right-premium" id="block-settings-two">
<h3 class="settings-title" style="margin-top: 10px; text-align: center; font-weight: bold;">test</h3>
</div>
</a>
const div = document.querySelector('your-div');
const img = document.querySelector('your-img');
div.onmouseover = () => img.src = 'your src';
這應該有效。
通過JQuery,我們為col-md-12
div的hover事件添加監聽器,將src屬性改為圖片
$('.col-md-12').hover(function() { original = $('.button-img').attr('src'); $('.button-img').attr('src', 'img2.jpg'); }, function() { $('.button-img').attr('src', original); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-12" style="margin-left: 40px; margin-top: 5px;"> <a href="{{ action('') }}" id="link-settings" href=""> <div id="block-settings" class="col-xs-2 button-left-premium"> <img class="button-img" src="{{ asset('/img.png') }}"></img> </div> <div class="col-xs-5 button-right-premium" id="block-settings-two"> <h3 class="settings-title" style="margin-top: 10px; text-align: center; font-weight: bold;">test</h3> </div> </a>
使用純JS:
let a = document.getElementById('a');
let b = document.getElementById('b');
a.addEventListener('mouseover', function () {
let newSrc = '/b.jpg';
if (a.getAttribute('src') !== newSrc) {
a.src = newSrc;
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.