Hover effect not activating on image within modal

only img:hover is working, but after adding this to the CSS:

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

it's not working. I changed the class and id names, tried everything,

but it still won't work.

What I want is for the user to hover over an image and have this class/id display: block. Also, can I use multiple classes/ids on hover or should I stick to only one?

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> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c4c5d52585d4556557c5b5550125f5351">[email protected]</a></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>
htmlcsstwitter-bootstrapbootstrap-modal

Answer №1

why using 

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

If you want to show your .change-pic i upon hovering your image, utilize the "+" selector to select the next sibling element after your image in the hierarchy. This way, you can target your icon correctly like so:

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

Here's an example Snippet demonstrating this behavior:

#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> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0c0d1ded4d1c9dad9f0d7ddd1d9dc9ed3dfdd">[email protected]</a></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-selector

The code snippet above attempts to target an element within the image tag on hover, which is not a valid CSS selector.

If you want to display a different element when hovering over the image, it's recommended to implement this functionality using JavaScript.

You can check out a demonstration I created on this website

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with network issues when submitting a form

Is there a smooth way to handle network errors that may arise during the submission of an HTML form? It is important for me not to have the browser cache any information related to the form, but I also want to ensure that the user's data is not lost i ...

javascripthtml

Basic progress bar

I'm attempting to create a basic download bar, but it's only displaying as a solid color without any transition animation. Furthermore, the "repeating-linear-gradient" feature isn't functioning and I'm struggling to figure out why. I&a ...

csshtml

Using HTML and CSS to capture user input data and store it in an array

I've created a form that allows users to add and remove multiple fields, ranging from one to three. My goal is to retrieve the form data and store it in an array. index.html <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlcss

Having trouble getting the JavaScript function to run when clicking a button inside a div or form?

Hey there, so I've got this scenario where I have a button nestled within a div. Take a look at the HTML snippet below: <div class="row"> <button type="button" id="submit">Send</button> </div> Prior to this button, there ...

javascriptjqueryhtmlcssgetelementbyid

Images Centerfold Team

I am facing a challenge in creating a group of images for an album. There seems to be a significant gap on the right side, which cannot be resolved without using padding. However, adding padding only works for my current PC resolution and creates a larger ...

htmlcsstwitter-bootstrap-3

The dropdown menu in Bootstrap is malfunctioning despite the up and down arrow keys working properly

I've been attempting to create a basic dropdown menu using Bootstrap dropdown, and so far, it's been working perfectly in most instances. However, on certain pages, when I click on the three dots that are supposed to activate the dropdown, nothin ...

phpjqueryhtmlcss

JavaScript vs. markup: deciding between generating an extensive list of options or including them directly in

Recently, I encountered an issue with a .NET page that included a large number of identical dropdown lists within a repeater. Unfortunately, the rendering performance of the website was below expectations. In an attempt to improve the performance, I exper ...

javascripthtml

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

I am facing a situation where the id attribute is inputted by an end user. For instance, if the id for a textbox is "11_=11" as entered by the user, then the HTML code will appear like this: <input type="text" id="11_=11"> The corresponding jQuery ...

javascriptjquerycsshtml

Is there a way to arrange the components of my form so that the questions are positioned on the left side and the choices are displayed on the right

As I am creating a form, my goal is to align the information within it in a way that places the questions on the left side and the options on the right. I have experimented with utilizing IDs, centering them, and adjusting their positioning from left to r ...

htmlcssformsalignment

Online platform generating printed code

Have you checked out the website here? I'm facing a problem on that site and can't figure out why. I've installed PDO, PHP, httpd, php-mysql, but still unable to resolve the issue. I've even tried reinstalling everything and following ...

phphtmlmysqlapachepdo

Swapping values between HTML tables and arrays with the power of JavaScript

I have a unique table structure that I need help with: My current table has 2 rows and multiple columns, but I want to change it to have 2 columns and multiple rows like this: To create the table, I am using two arrays named milestone and milestoneDate. ...

javascripthtmlcsshtml-tabletranspose

What is the best way to conceal a dropdown menu when the page first loads?

I have a dropdown menu that is displaying like this: <ul> <li class="dropdown open"> <a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown"> <spa ...

javascriptjqueryhtmlcssdrop-down-menu

A unique technique for creating a stunning visual effect with images using

Can anyone help me with this issue: Check out this animated GIF The images in my project are overlapping when scrolling! How can I achieve a similar effect for my images? Is there a tutorial or plugin available for this? Here is the current code sn ...

javascripthtmlcss

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

htmlcssangularangularjsprimeng

What is the method to showcase every single word?

Can someone help me with my assignment? I am tasked with creating a small user interface that searches a list of words using HTML, CSS, and Javascript. The design is provided, but I need to implement it. I have written the code, but I would like all wor ...

javascripthtmljquery

What's the most efficient way to iterate through this Array and display its contents in HTML?

I'm struggling to sort a simple array and I think the issue might be related to the time format. I'm not sure how to reference it or how I can properly sort the time in this array format for future sorting. //function defined to input values ...

javascripthtmlarraysloops

Ensure that every HTML link consistently triggers the Complete Action With prompt on Android devices

After extensive searching, I have yet to find a solution to my issue. I have been developing a web application that allows users to play video files, primarily in the mp4 format. Depending on the mobile browser being used, when clicking the link, the vide ...

javascriptphpandroidhtmlonchange

navigate to a different section on the page with a series of visuals preceding it

When I try to navigate to a specific dom element on another page, the page initially works fine but then jumps to somewhere before that element. I believe this issue occurs because the page calculates the position before images load, and once the images ar ...

javascripthtml

The element is not occupying the full width within the div container

I'm working with a div that contains some elements. My goal is to have these elements span the entire width of the container div. .container { height: 100px; width: 100px; display: flex; flex-direction: column; overflow: scroll; borde ...

htmlcss

Guide on sending information using ajax using a button within a form

I've been working on creating a form that utilizes HTML5 validations and integrates Ajax to show the status of mail sending. However, I'm facing an issue where clicking the send button does not initiate the expected action. Form HTML: <div c ...

javascriptphpjqueryhtmlajax