Question

我想用鼠标悬停时其下面列表中的内容更新main div的内容。列表的相应内容应在悬停时在主div中进行更新，每次我将列表悬停时都应更改。内容包括用户图像，用户名和用户信息。我在这里分享了我的HTML代码。

<div class="selected_user">
    <img src="images/user1.jpg" class="img-responsive" alt="User1">
    <h4>Mark Russell</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>


<div class="userlist">
    <div class="listblock user1">
        <img src="images/user1.jpg" class="img-responsive" alt="User1">
        <h4>Mark Russell</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="listblock user1">
        <img src="images/user2.jpg" class="img-responsive" alt="User2">
        <h4>John Doe</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="listblock user1">
        <img src="images/user3.jpg" class="img-responsive" alt="User3">
        <h4>Dave Williams</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="listblock user4">
        <img src="images/user1.jpg" class="img-responsive" alt="User4">
        <h4>Brian O Conner</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="listblock user5">
        <img src="images/user1.jpg" class="img-responsive" alt="User5">
        <h4>Jessica Simpsons</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

Answer 1

我不确定您的要求，希望能有所帮助。谢谢

$('.userlist div').mouseenter(function(e){

$('.selected_user img').attr('src',$(this).find('img').attr('src'))
$('.selected_user h4').text($(this).find('h4').text())
$('.selected_user p').text($(this).find('p').text())


})

.selected_user
{
border:1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="selected_user">
    <img src="images/user1.jpg" class="img-responsive" alt="User1">
    <h4>Mark Russell</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

<div class="userlist">
    <div class="listblock user1">
        <img src="images/user1.jpg" class="img-responsive" alt="User1">
        <h4> Russell</h4>
        <p> adipisicing elit.</p>
    </div>
    <div class="listblock user1">
        <img src="images/user2.jpg" class="img-responsive" alt="User2">
        <h4>John Doe</h4>
        <p> dolor  </p>
    </div>
    <div class="listblock user1">
        <img src="images/user3.jpg" class="img-responsive" alt="User3">
        <h4>Dave Williams</h4>
        <p> elit.</p>
    </div>
    <div class="listblock user4">
        <img src="images/user1.jpg" class="img-responsive" alt="User4">
        <h4>Brian O Conner</h4>
        <p>  sit amet, </p>
    </div>
    <div class="listblock user5">
        <img src="images/user1.jpg" class="img-responsive" alt="User5">
        <h4>Jessica Simpsons</h4>
        <p> consectetur .</p>
    </div>
</div>

用鼠标悬停列表的内容更新main div的内容

1 个答案: