Home >Web Front-end >HTML Tutorial >求教一个问题,当鼠标放上去在改变背景图片时,同时改变div里面的图片,怎么实现?_html/css_WEB-ITnose

求教一个问题,当鼠标放上去在改变背景图片时,同时改变div里面的图片,怎么实现?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:29:521691browse

下面附上图片及代码


<div class="kaidian"><div style="height: 160px;"><div class="toppic"><img  src="./images/f_a_03.png"   style="max-width:90%"/ alt="求教一个问题,当鼠标放上去在改变背景图片时,同时改变div里面的图片,怎么实现?_html/css_WEB-ITnose" ></div><div class="title">一键开店</div><div class="content">效果文字不要阅读,效果文字不要阅读效果文字不要阅读</div></div><img  src="./images/f_a_09.png"   style="max-width:90%"/ alt="求教一个问题,当鼠标放上去在改变背景图片时,同时改变div里面的图片,怎么实现?_html/css_WEB-ITnose" ></div>

.circle .kaidian:hover{	width: 200px;    height: 330px;    margin-top: 10px;    background: url(./images/fp_37.png) center no-repeat;    background-size: 180px 220px;    -ms-behavior: url(css/backgroundsize.min.htc);    behavior: url(css/backgroundsize.min.htc);    float: left;}


回复讨论(解决方案)

<script></script>



求教一个问题,当鼠标放上去在改变背景图片时,同时改变div里面的图片,怎么实现?_html/css_WEB-ITnose

一键开店

效果文字不要阅读,效果文字不要阅读效果文字不要阅读


求教一个问题,当鼠标放上去在改变背景图片时,同时改变div里面的图片,怎么实现?_html/css_WEB-ITnose

<script> <br /> $('.kaidian').hover(function(){var a=$('.toppic img',this);a.attr('src',a.attr('data-img1'))},function(){var a=$('.toppic img',this);a.attr('src',a.attr('data-img2'))}) <br /></script>

<script></script>



求教一个问题,当鼠标放上去在改变背景图片时,同时改变div里面的图片,怎么实现?_html/css_WEB-ITnose

一键开店

效果文字不要阅读,效果文字不要阅读效果文字不要阅读


求教一个问题,当鼠标放上去在改变背景图片时,同时改变div里面的图片,怎么实现?_html/css_WEB-ITnose

<script> <br /> $('.kaidian').hover(function(){var a=$('.toppic img',this);a.attr('src',a.attr('data-img1'))},function(){var a=$('.toppic img',this);a.attr('src',a.attr('data-img2'))}) <br /></script> O(∩_∩)O谢谢
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn