图像悬停不适用于模态

Question

只有 img:hover 工作，但在 css 上添加后

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

它不工作。我改变了班级，id名称，做了一切，

但仍然无法正常工作。

实际上我想如果用户悬停图像那么这个类/id应该display:block.还有一个关于hover的问题“应该只使用一个类/id还是可以使用多个类/id？

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>

Answer 1

为什么要使用

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

Answer 2

img:hover #user-profile

通过上面的行，您尝试在图像标签内选择一个元素。这是不可能的。

当您想在悬停图像时显示不同的元素时，您应该考虑使用 javascript。

我发了demo on codepen