jquery .css script doesn't work

Question

Morning, I'm trying to display a div onmouseover. I created a function but i don't know what is wrong. Could you help me please.

The HTML code:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <title> PHOTOGALLERY</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <link rel="stylesheet" href="css/smoothness/jquery-ui-
         1.9.2.custom.css"/>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script src="http://malsup.github.com/jquery.cycle2.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js">
    </script>
    <script>
        function show_img_container() {
            $("#image_container").css("display", "block");
        }
    </script>
</head>
<body>
    <div id="div_container">
        <div id="div_image" class="cycle-slideshow">
            <img src="images/2.jpg" style="height:100%; width:100%">
            <img src="images/3.jpg" style="height:100%; width:100%">
            <img src="images/4.jpg" style="height:100%; width:100%">
            <img src="images/5.jpg" style="height:100%; width:100%">
        </div>
        <div id="image_container" onmouseover="show_img_container()"></div>
    </div>
</body>
</html>

In the css file i have a image_container id where the attribute display is set to 'none';

I'm curious, is it possible to hover an element that is displayed as none? — Carl Binalla
– Carl Binalla, Commented Jun 9, 2017 at 7:50
It is better to attach CSS code than describing what you have written there — Arkej
– Arkej, Commented Jun 9, 2017 at 7:50
@Novice How can you hover an element in which you have displayed as none? — Carl Binalla
– Carl Binalla, Commented Jun 9, 2017 at 7:52
you are triggering an function on the element which is not displayed.. — Chandra Shekhar
– Chandra Shekhar, Commented Jun 9, 2017 at 7:53

Deathstorm · Accepted Answer · 2017-06-09 07:55:43Z

3

If you only want to show the <div> on hover you wouldn't need any JS you could try someting like this:

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

To explain further:
Since you're using display: none; on the container the mousehover won't take affect since the <div> can't be found by the event since it's not displaying in the first place.

Hope this helps!

answered Jun 9, 2017 at 7:55

Deathstorm

86713 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Y4roc · Accepted Answer · 2017-06-09 08:02:48Z

3

In the css file i have a image_container id where the attribute display is set to 'none';

It is not possible to hover a none blocked element.

You can use the opacity attribute to hide your div.

div {
    opacity: 0;
}
    
div:hover {
    opacity: 1;
}

<div>Stuff shown on hover</div>

edited Jun 9, 2017 at 8:02

answered Jun 9, 2017 at 7:56

Y4roc

1,1368 silver badges12 bronze badges

Comments

Satpal · Accepted Answer · 2017-06-09 08:00:17Z

2

You cant hover on div if its display is sets to none.

edited Jun 9, 2017 at 8:00

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Jun 9, 2017 at 7:51

alil rodriguez

1247 bronze badges

8 Comments

Rohan Kumar Over a year ago

It should be a comment.

Mihai T Over a year ago

well that's why i downvoted. but seems like everybody else ( almost ) think this is worthy of an answer

Satpal Over a year ago

@MihaiT, IMHO its worthy of answer

Mihai T Over a year ago

@Satpal an answer should give a solution. IMO. i think that's one of the reasons the comments were created. for ' answers ' such as these. But anyway, i respect others opinions

alil rodriguez Over a year ago

Im sorry im new on stack.. thank you for correcting me.

|

Carl Binalla · Accepted Answer · 2017-06-09 08:00:48Z

2

I'll answer based on what OP has provided. wrap the #image_container with a div that contains the function, then it should work.

And since it's quite weird that something appeared when hovered but didn't disappear after hovering out, I added another function for onmouseout

function show_img_container() {
  $("#image_container").css("display", "block");
}
function hide_img_container() {
  $("#image_container").css("display", "none");
}

#image_container {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="show_img_container()" onmouseout="hide_img_container()">
  HOVER ME!!
  <div id="image_container">IM HIDDEN!!!</div>
</div>

answered Jun 9, 2017 at 8:00

Carl Binalla

5,4315 gold badges31 silver badges49 bronze badges

Comments

Novice · Accepted Answer · 2017-06-09 09:31:29Z

-1

Ok. I know the problem. In the css stylesheet i had this:

#image_container {
position: absolute;
height: 120px;
width: 100%;
bottom: 5%;
background-color: black;
opacity: 0;
**transition: all 0.3s ease-in-out 2s;**
z-index: 1;

}

#image_container:hover {
opacity: 1;
}

If i delete the transition attribute it works:` Could you show me why?

answered Jun 9, 2017 at 9:31

Novice

72 bronze badges

1 Comment

Y4roc Over a year ago

try transistion: opacity 0.3s ease-in-out 2s;

Collectives™ on Stack Overflow

jquery .css script doesn't work

5 Answers 5

Comments

Comments

8 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

8 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related