Response title
This is preview!
Move this topic
Mouseover hover Effect/Event for each div among multiple divs with same class
in Using jQuery
•
4 years ago
Hi,
I am using php while loop to show comments on a page.
and i have some css class for comment div.
So every comment has the same css class
Now the issue is, I am using a mouseover effect to show the dropdown options arrow to report or favorite a comment.
but the mouseover effect is being shown only on the 1st comment even i am hovering the mouse on 2nd, 3rd or any other comment. arrow appears only on 1st comment
I need a jquery help. i can post the pictures and html code as well if you ask me to do so
I am using php while loop to show comments on a page.
and i have some css class for comment div.
So every comment has the same css class
Now the issue is, I am using a mouseover effect to show the dropdown options arrow to report or favorite a comment.
but the mouseover effect is being shown only on the 1st comment even i am hovering the mouse on 2nd, 3rd or any other comment. arrow appears only on 1st comment
I need a jquery help. i can post the pictures and html code as well if you ask me to do so
1
Replies(20)
Pictures don’t do much. Code helps. Links to demos are best.
JΛ̊KE
Sir, i hv posted the code, can you plz check it
Leave a comment on jakecigar's reply
HTML >
<div class="container1" onMouseOver="show_divicon()" onMouseOut="hide_divicon()">
<div class="div-image">
<img src="google-pixel-2880x2560-stock-hd-5881.jpg">
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
Atif Sheikh
</span>
</div>
<div class="div-time">
<span class="time-text">
09:13 PM
</span>
</div>
<div id="div-options">
<span class="time-text div-option-div">
<a href="#">Arrow</a>
</span>
</div>
</div>
<div class="div-right-mid">
<span class="comment-text"> this is comment
</span>
</div>
<section class="div-right-bottom small">
<div class="div-like">
<span class="text-bottom"> like
</span>
</div>
<div class="div-desh">
<span class="text-bottom"> -
</span>
</div>
<div class="div-dislike">
<span class="text-bottom"> dislike
</span>
</div>
<div class="div-desh">
<span class="text-bottom"> -
</span>
</div>
<div class="div-reply">
<span class="text-bottom"> reply
</span>
</div>
</section>
</div>
</div>
<div class="container1" onMouseOver="show_divicon()" onMouseOut="hide_divicon()">
<div class="div-image">
<img src="google-pixel-2880x2560-stock-hd-5881.jpg">
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
Atif Sheikh
</span>
</div>
<div class="div-time">
<span class="time-text">
09:13 PM
</span>
</div>
<div id="div-options">
<span class="time-text div-option-div">
<a href="#">Arrow</a>
</span>
</div>
</div>
<div class="div-right-mid">
<span class="comment-text"> this is comment
</span>
</div>
<section class="div-right-bottom small">
<div class="div-like">
<span class="text-bottom"> like
</span>
</div>
<div class="div-desh">
<span class="text-bottom"> -
</span>
</div>
<div class="div-dislike">
<span class="text-bottom"> dislike
</span>
</div>
<div class="div-desh">
<span class="text-bottom"> -
</span>
</div>
<div class="div-reply">
<span class="text-bottom"> reply
</span>
</div>
</section>
</div>
</div>
CSS >
.container1{
min-height:83px;
width: 74.21383647798743%;
*width: 74.16142557651992%;
background-color:#FFF;
margin-left:128px;
border:1px solid #4867aa;
margin-top:1px;
}
.div-image{
height:80px;
width:68px;
margin-top:1px;
margin-left:1px;
float:left;
}
img{
height:80px;
width:68px;
}
.div-right{
min-height:81px;
width:667px;
margin-top:2px;
margin-left:80px;
}
.div-right-top{
height:28px;
width:667px;
}
.div-right-mid{
min-height:28px;
width:667px;
background-color:#FFF;
text-align:-webkit-left;
}
.comment-text{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#000;
}
.div-right-bottom{
height:24px;
width:667px;
}
.div-user-name{
height:28px;
float:left;
margin-left:1px;
font-family:'Open Sans', sans-serif;
}
.text-user-name{
font-size:16px;
color:#000066;
font-weight:600;
}
.div-time{
height:18px;
width:70px;
float:left;
margin-left:14px;
}
#div-options{
height:18px;
float:right;
margin-right:20px;
visibility:hidden;
}
.time-text{
font-size:78%;
color:#6d7371;
font-family:sans-serif;
}
.div-like{
height:18px;
width:30px;
float:left;
margin-left:150px;
margin-top:5px;
}
.div-reply, .div-dislike{
height:18px;
width:40px;
float:left;
margin-top:5px;
}
.text-bottom{
color:#06C;
text-transform:capitalize;
}
.div-desh{
height:18px;
width:10px;
float:left;
margin-top:5px;
}
.small {
font-size:77%;
font-family:'Open Sans', sans-serif;
}
.div-option-div {
position: relative;
display: inline-block;
}
.div-option-div:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
Javascript >
function show_divicon()
{
document.getElementById('div-options').style.visibility="visible";
}
function hide_divicon()
{
document.getElementById('div-options').style.visibility="hidden";
}
Leave a comment on mAtif's reply
1 You are not using any jQuery code.
2 You have one tag with mouseover mouseout code,
3 And both of your functions use an ID. Use a class that is relative to that div.
<div class="container1" onMouseOver="show_divicon()" onMouseOut="hide_divicon()">
is very old style code.
JΛ̊KE
Leave a comment on jakecigar's reply
Sir, I want a jquery code, i am not familiar to jquery thats why i need help.
I tried this one
$(document).ready(function (e) {
$(".container1").hover(function (e) {
$(this).find('.div-options').show();
}, function (e) {
$(this).find('.div-options').hide();
});
});
but not working
The code looks legitimate. Did you check for errors in the dev tools? Did you include jQuery on your page?
JΛ̊KE
Leave a comment on mAtif's reply
Yes i have included everything, and all other sutff is working. but this code is not working
even i gave the class to div div-options
Leave a comment on mAtif's reply
And no errors in the dev tools. It’s time you prepare a demo so we can see it fail.
JΛ̊KE
Leave a comment on jakecigar's reply
dev tools Console showing this one
Uncaught TypeError: Cannot read property 'options' of undefined
at HTMLDocument.<anonymous> (app.min.js:13)
at i (jquery-2.2.3.min.js:2)
at Object.fireWith [as resolveWith] (jquery-2.2.3.min.js:2)
at Function.ready (jquery-2.2.3.min.js:2)
at HTMLDocument.J (jquery-2.2.3.min.js:2)
Leave a comment on mAtif's reply
What is app.min.js? It has an error. Or you called something wrong that is inside it.
JΛ̊KE
Leave a comment on jakecigar's reply
This code works for me…
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>
Untitled
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://code.jquery.com/jquery-2.2.3.min.js">
</script>
<script>
$(function(){
$(".container1").hover(function (e) {
$(this).find('.div-options').css('visibility',"visible");
}, function (e) {
$(this).find('.div-options').css('visibility',"hidden");
});
})
</script>
<style>
.container1{
min-height:83px;
width: 74.21383647798743%;
*width: 74.16142557651992%;
background-color:#FFF;
margin-left:128px;
border:1px solid #4867aa;
margin-top:1px;
}
.div-image{
height:80px;
width:68px;
margin-top:1px;
margin-left:1px;
float:left;
}
img{
height:80px;
width:68px;
}
.div-right{
min-height:81px;
width:667px;
margin-top:2px;
margin-left:80px;
}
.div-right-top{
height:28px;
width:667px;
}
.div-right-mid{
min-height:28px;
width:667px;
background-color:#FFF;
text-align:-webkit-left;
}
.comment-text{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#000;
}
.div-right-bottom{
height:24px;
width:667px;
}
.div-user-name{
height:28px;
float:left;
margin-left:1px;
font-family:'Open Sans', sans-serif;
}
.text-user-name{
font-size:16px;
color:#000066;
font-weight:600;
}
.div-time{
height:18px;
width:70px;
float:left;
margin-left:14px;
}
.div-options{
height:18px;
float:right;
margin-right:20px;
visibility:hidden;
}
.time-text{
font-size:78%;
color:#6d7371;
font-family:sans-serif;
}
.div-like{
height:18px;
width:30px;
float:left;
margin-left:150px;
margin-top:5px;
}
.div-reply, .div-dislike{
height:18px;
width:40px;
float:left;
margin-top:5px;
}
.text-bottom{
color:#06C;
text-transform:capitalize;
}
.div-desh{
height:18px;
width:10px;
float:left;
margin-top:5px;
}
.small {
font-size:77%;
font-family:'Open Sans', sans-serif;
}
.div-option-div {
position: relative;
display: inline-block;
}
.div-option-div:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
</style>
</head>
<body>
<div class="container1" onMouseOver="show_divicon()" onMouseOut="hide_divicon()">
<div class="div-image">
<img src="google-pixel-2880x2560-stock-hd-5881.jpg">
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
Atif Sheikh
</span>
</div>
<div class="div-time">
<span class="time-text">
09:13 PM
</span>
</div>
<div class="div-options">
<span class="time-text div-option-div">
<a href="#">
Arrow
</a>
</span>
</div>
</div>
<div class="div-right-mid">
<span class="comment-text">
this is comment
</span>
</div>
<section class="div-right-bottom small">
<div class="div-like">
<span class="text-bottom">
like
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-dislike">
<span class="text-bottom">
dislike
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-reply">
<span class="text-bottom">
reply
</span>
</div>
</section>
</div>
</div>
<div class="container1" onMouseOver="show_divicon()" onMouseOut="hide_divicon()">
<div class="div-image">
<img src="google-pixel-2880x2560-stock-hd-5881.jpg">
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
Atif Sheikh
</span>
</div>
<div class="div-time">
<span class="time-text">
09:13 PM
</span>
</div>
<div class="div-options">
<span class="time-text div-option-div">
<a href="#">
Arrow
</a>
</span>
</div>
</div>
<div class="div-right-mid">
<span class="comment-text">
this is comment
</span>
</div>
<section class="div-right-bottom small">
<div class="div-like">
<span class="text-bottom">
like
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-dislike">
<span class="text-bottom">
dislike
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-reply">
<span class="text-bottom">
reply
</span>
</div>
</section>
</div>
</div>
<div class="container1">
<div class="div-image">
<img src="google-pixel-2880x2560-stock-hd-5881.jpg">
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
Atif Sheikh
</span>
</div>
<div class="div-time">
<span class="time-text">
09:13 PM
</span>
</div>
<div class="div-options">
<span class="time-text div-option-div">
<a href="#">
Arrow
</a>
</span>
</div>
</div>
<div class="div-right-mid">
<span class="comment-text">
this is comment
</span>
</div>
<section class="div-right-bottom small">
<div class="div-like">
<span class="text-bottom">
like
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-dislike">
<span class="text-bottom">
dislike
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-reply">
<span class="text-bottom">
reply
</span>
</div>
</section>
</div>
</div>
<div class="container1">
<div class="div-image">
<img src="google-pixel-2880x2560-stock-hd-5881.jpg">
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
Atif Sheikh
</span>
</div>
<div class="div-time">
<span class="time-text">
09:13 PM
</span>
</div>
<div class="div-options">
<span class="time-text div-option-div">
<a href="#">
Arrow
</a>
</span>
</div>
</div>
<div class="div-right-mid">
<span class="comment-text">
this is comment
</span>
</div>
<section class="div-right-bottom small">
<div class="div-like">
<span class="text-bottom">
like
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-dislike">
<span class="text-bottom">
dislike
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-reply">
<span class="text-bottom">
reply
</span>
</div>
</section>
</div>
</div>
</body>
</html>
JΛ̊KE
Leave a comment on jakecigar's reply
I solved it out, now there is no error in console
i am putting all these codes to jsfiddle but jsfiddle is not showing any result :(
Leave a comment on mAtif's reply
OR you can just forget about using jQuery on this one and add
- .container1:hover .div-options{
- visibility:visible;
- }
JΛ̊KE
Leave a comment on jakecigar's reply
Gosh, its working... what did you do, have you changed anything in it?
I indented it, I used classes and I changed the visibility CSS instead of show/hide (the display CSS).
JΛ̊KE
Leave a comment on mAtif's reply
Both of the ways are working
using jquery or using css hover property.
honestly, how stupid i was i even did not care that i could use hover property in css and it will be done.
Thanks a lot.... you made it. i was stuck in it for last 4 days :(
Thank you very much brother
Leave a comment on mAtif's reply
One issue
On mouseout it disappears. thats Fine
But if visible object is clicked, then it shoud not hide on mouseout.
as i am using options in a drop down list. so when i click on arrow, drop down list shows, i want this list to stay visible even mouse is removed from the parent div.
only it should hide when i click on somewhere else
Sounds like you have changed the question from a "hover" one to some rules. CSS alone won’t do it. I would add a class to the "active" div so new CSS can show the other element, Just remember to remove the "active" class from the other divs.
JΛ̊KE
Leave a comment on mAtif's reply
Sorry, Could not get you
Can you update this jquery code for this hidden div to stay visible after clicked until next click on somewhere else
$(function(){
$(".container1").hover(function (e) {
$(this).find('.div-options').css('visibility',"visible");
}, function (e) {
$(this).find('.div-options').css('visibility',"hidden");
});
})
Leave a comment on mAtif's reply
That was my code. For the original question.
It’s completely different with the second question.
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to mAtif's question
{"z651684838":[14737000007364174,14737000007364215,14737000007364179,14737000007364217,14737000007364219,14737000007364221,14737000007364223,14737000007364225,14737000007364227,14737000007376001,14737000007373031],"z2950240":[14737000007365197,14737000007365205,14737000007365207,14737000007365209,14737000007365211,14737000007365213,14737000007365215,14737000007365217,14737000007377001,14737000007377027]}