Question

我想在onmouseover 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>

Answer 1

const div = document.querySelector('your-div');
const img = document.querySelector('your-img');
div.onmouseover = () => img.src = 'your src';

Answer 2

这应该有用。

通过JQuery，我们为col-md-12 div的悬停事件添加一个监听器，并将src属性更改为图像

＆＃13;

$('.col-md-12').hover(function() {
  original = $('.button-img').attr('src');
  $('.button-img').attr('src', 'img2.jpg');
}, function() {
  $('.button-img').attr('src', original);
})

＆＃13;

<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>

＆＃13;

Answer 3

使用普通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;
    }
})

更改图像src onmouseover div

3 个答案: