Изображение не работает на модальном - PullRequest
Новая
       1

Изображение не работает на модальном

0 голосов
/ 05 июня 2018

только img:hover работает, но после добавления этого на css 

#user-profile #user-myModal .modal-body img:hover #user-profile #user-myModal .modal-body .change-pic i{
    display: block;
}

не работает.Я изменил класс, имя, имя, все сделал,

, но все еще не работает.

На самом деле я хочу сделать, если пользователь наводит на изображение, тогда этот класс / идентификатор должен display:block. И еще один вопрос по hover "должен использовать только один класс / идентификатор или может использовать несколько классов / идентификаторов?

CSS: 

#user-profile #user-myModal .modal-body img{
    border: 1px solid gray;
    height: 160px;
    width: 87%;
    margin-left: 9%;
    margin-top: 8%;
    position: relative;
}
#user-profile #user-myModal .modal-body .change-pic i {
    position: absolute;
    top: 43%;
    left: 39%;
    color: black;
    z-index: 999;
    height: 50px;
    width: 50px;
    background: white;
    border: 1px solid;
    border-radius: 50px;
    padding: 7% 0% 0% 8.4%;
    display: none;
}
#user-profile #user-myModal .modal-body img:hover #user-profile #user-myModal .modal-body .change-pic i{
    display: block;
}

HTML: 

<section id="user-profile">
  <div id="user-myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
            <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <ul class="nav nav-tabs list-inline">
            <li role="presentation" class="active"><a id="profile-tab" href="#">Your Profile</a></li>
            <li role="presentation"><a id="edit-profile-tab" href="#edit-profile">Edit Profile</a></li>
          </ul>
        </div>
        <div class="modal-body">
          <div class="row" id="user-profile-tab">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
              <img src="img/jagdish.jpg" class="img-responsive">
              <div class="change-pic">
                <i class="fas fa-upload"></i>
              </div>
            </div>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 details">
                <h4>Mr. jagdish Panday</h4>
              <h6><strong>Occupation :</strong> Web Developer</h6>
              <h6><strong>Address :</strong> Kausaltar, Madhyapur Thimi, Nepal</h6>
              <h6><strong>Phone :</strong> 9863696718</h6>
              <h6><strong>Email :</strong> pandayji@gmail.com</h6>
              <ul>
                <li class="facebook"><i class="fab fa-facebook"></i></li>
                <li class="twitter"><i class="fab fa-twitter-square"></i></li>
                <li class="instagram"><i class="fab fa-instagram"></i></li>
                <li class="google"><i class="fab fa-google-plus-square"></i></li>
              </ul>
            </div>
          </div>

          <div class="edit-profile text-center" id="edit-profile" style="display:none;">
            <form>
                            <input type="text" placeholder="Name"><br>
                            <input type="text" placeholder="Occupation"><br>
                            <input type="text" placeholder="Address"><br>
                            <input type="text" placeholder="Phone Number"><br>
                            <input type="text" placeholder="Email"><br>
                            <a class="btn btn-default">Save Changes</a>
            </form>
          </div>
        </div>
        </div>
    </div>
  </div>
</section>

Ответы [ 2 ]

0 голосов
/ 05 июня 2018 
img:hover #user-profile

С помощью приведенной выше строки вы пытаетесь выбрать элемент внутри тега изображения.Это невозможно.

Когда вы хотите показать другой элемент при наведении на изображение, вы должны рассмотреть возможность использования javascript.

Я сделал демонстрацию на codepen

0 голосов
/ 05 июня 2018

почему, используя 

#user-profile #user-myModal .modal-body img:hover #user-profile #user-myModal .modal-body .change-pic i{
    display: block;
}

, вы должны получить доступ к своему значку с помощью селектора "+", который выбирает следующий родной элемент после вашего img no, чтобы показать .change-pic i как: 

#user-profile #user-myModal .modal-body img:hover + .change-pic i {
    display: block;
}

См. Ниже фрагмент: 

#user-profile #user-myModal .modal-body img{
    border: 1px solid gray;
    height: 160px;
    width: 87%;
    margin-left: 9%;
    margin-top: 8%;
    position: relative;
}
#user-profile #user-myModal .modal-body .change-pic i {
    position: absolute;
    top: 43%;
    left: 39%;
    color: black;
    z-index: 999;
    height: 50px;
    width: 50px;
    background: white;
    border: 1px solid;
    border-radius: 50px;
    padding: 7% 0% 0% 8.4%;
    display: none;
}
#user-profile #user-myModal .modal-body img:hover + .change-pic i{
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" data-toggle="modal" data-target="#user-myModal">Open Modal</button>
<section id="user-profile">
    <div id="user-myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <!--<h4 class="modal-title">Your Profile</h4>-->

                        <ul class="nav nav-tabs list-inline">
                            <li role="presentation" class="active"><a id="profile-tab" href="#">Your Profile</a></li>
                            <li role="presentation"><a id="edit-profile-tab" href="#edit-profile">Edit Profile</a></li>
                        </ul>
                </div>
                <div class="modal-body">
                    <div class="row" id="user-profile-tab">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Jagdish.jpg/450px-Jagdish.jpg" class="img-responsive">
                            <div class="change-pic">
                                <i class="fa fa-upload"></i>
                            </div>
                            <!--<a id="btn-edit-profile" class="btn btn-default">Edit Profile</a>-->
                        </div>
                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 details">
                            <h4>Mr. jagdish Panday</h4>
                            <h6><strong>Occupation :</strong> Web Developer</h6>
                            <h6><strong>Address :</strong> Kausaltar, Madhyapur Thimi, Nepal</h6>
                            <h6><strong>Phone :</strong> 9863696718</h6>
                            <h6><strong>Email :</strong> pandayji@gmail.com</h6>
                            <ul>
                                <li class="facebook"><i class="fab fa-facebook"></i></li>
                                <li class="twitter"><i class="fab fa-twitter-square"></i></li>
                                <li class="instagram"><i class="fab fa-instagram"></i></li>
                                <li class="google"><i class="fab fa-google-plus-square"></i></li>
                            </ul>
                        </div>
                    </div>

                    <div class="edit-profile text-center" id="edit-profile" style="display:none;">
                        <form>
                             <input type="text" placeholder="Name"><br>
                             <input type="text" placeholder="Occupation"><br>
                             <input type="text" placeholder="Address"><br>
                             <input type="text" placeholder="Phone Number"><br>
                             <input type="text" placeholder="Email"><br>
                             <a class="btn btn-default">Save Changes</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
...