Mouseover hover Effect/Event for each div among multiple divs with same class

jakecigar

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

Pictures don’t do much. Code helps. Links to demos are best.

JΛ̊KE

mAtif

Re: Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

Sir, i hv posted the code, can you plz check it

mAtif

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

HTML >

</div>

Atif Sheikh

</span>

</div>

09:13 PM

</span>

</div>

<a href="#">Arrow</a>

</span>

</div>

<span class="comment-text"> this is comment

</span>

</div>

<span class="text-bottom"> like

</span>

</div>

<span class="text-bottom"> -

</span>

</div>

<span class="text-bottom"> dislike

</span>

</div>

<span class="text-bottom"> -

</span>

</div>

<span class="text-bottom"> reply

</span>

</div>

</section>

</div>

</div>

Atif Sheikh

</span>

</div>

09:13 PM

</span>

</div>

<a href="#">Arrow</a>

</span>

</div>

<span class="comment-text"> this is comment

</span>

</div>

<span class="text-bottom"> like

</span>

</div>

<span class="text-bottom"> -

</span>

</div>

<span class="text-bottom"> dislike

</span>

</div>

<span class="text-bottom"> -

</span>

</div>

<span class="text-bottom"> reply

</span>

</div>

</section>

</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";

}

jakecigar

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

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.

is very old style code.

JΛ̊KE

mAtif

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

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

jakecigar

Re: Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

The code looks legitimate. Did you check for errors in the dev tools? Did you include jQuery on your page?

JΛ̊KE

mAtif

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

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

jakecigar

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

And no errors in the dev tools. It’s time you prepare a demo so we can see it fail.

JΛ̊KE

mAtif

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

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)

jakecigar

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

What is app.min.js? It has an error. Or you called something wrong that is inside it.

JΛ̊KE

jakecigar

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

This code works for me…

<!DOCTYPE html>

<html>

<head>

<title>

Untitled

</title>

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

Atif Sheikh

</span>

</div>

09:13 PM

</span>

</div>

Arrow

</a>

</span>

</div>

this is comment

</span>

</div>

like

</span>

</div>

-

</span>

</div>

dislike

</span>

</div>

-

</span>

</div>

reply

</span>

</div>

</section>

</div>

</div>

Atif Sheikh

</span>

</div>

09:13 PM

</span>

</div>

Arrow

</a>

</span>

</div>

this is comment

</span>

</div>

like

</span>

</div>

-

</span>

</div>

dislike

</span>

</div>

-

</span>

</div>

reply

</span>

</div>

</section>

</div>

</div>

Atif Sheikh

</span>

</div>

09:13 PM

</span>

</div>

Arrow

</a>

</span>

</div>

this is comment

</span>

</div>

like

</span>

</div>

-

</span>

</div>

dislike

</span>

</div>

-

</span>

</div>

reply

</span>

</div>

</section>

</div>

</div>

Atif Sheikh

</span>

</div>

09:13 PM

</span>

</div>

Arrow

</a>

</span>

</div>

this is comment

</span>

</div>

like

</span>

</div>

-

</span>

</div>

dislike

</span>

</div>

-

</span>

</div>

reply

</span>

</div>

</section>

</div>

</body>

</html>

JΛ̊KE

mAtif

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

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 :(

jakecigar

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

OR you can just forget about using jQuery on this one and add

.container1:hover .div-options{
visibility:visible;
}

JΛ̊KE

mAtif

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

Gosh, its working... what did you do, have you changed anything in it?

jakecigar

Re: Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

I indented it, I used classes and I changed the visibility CSS instead of show/hide (the display CSS).

JΛ̊KE

mAtif

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

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

mAtif

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

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

jakecigar

Re: Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

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

mAtif

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

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");

});

})

jakecigar

Re: Mouseover hover Effect/Event for each div among multiple divs with same class

5 years ago

That was my code. For the original question.

It’s completely different with the second question.

JΛ̊KE

Response title

Attachments

jQuery Forum