Обновите содержимое основного div с содержимым списка при наведении мыши - PullRequest
Новая
       12

Обновите содержимое основного div с содержимым списка при наведении мыши

1 голос
/ 08 мая 2019

Я хочу обновить содержимое основного 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>

1 Ответ

0 голосов
/ 08 мая 2019

Я не уверен в ваших требованиях, надеюсь, это поможет. Спасибо 

$('.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>
...