selecting invisible or undisplayed items in mouseover event.

Page 1 of 1

3 Replies - 432 Views - Last Post: 07 October 2012 - 09:33 PM

#1 Crowz  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 68
  • Joined: 09-February 12

selecting invisible or undisplayed items in mouseover event.

Posted 07 October 2012 - 05:01 PM

Very simplistic code. It's more or less the same thing facebook has on its picture viewer, with an arrow on the left and right that fade in when you mouseover. The only difference in mine is that it will fade in when you mouseover the next button itself
Essentially, the problem I'm having is that when I set the display to none in the CSS sheet for the button class, it then disables my ability to mouseover it in JQuery. I tested this with alert() quite a few times.

JQuery code:
 $(document).ready(function() {
	$('.button').hide();
	$('.button').mousemove(function() {
		$('.button').show();
	});
});


HTML:
<!-- art gallery -->
<HTML lang="en">
<HEAD>
	<meta charset="utf-8" \>
	<title>Gallery</title>
	<link rel="stylesheet" href="gallery_stylesheet.css">
</HEAD>
<BODY>
	<div id="wrapper">
		<div id="prev_button" class="button">
		</div>
		<div id="picture">
		</div>
		<div id="next_button" class="button">
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/gallery.js"></script>
</BODY>
</HTML>


CSS:
#wrapper {
	height: 90%;
	width: 90%;
	border: 3px solid black;
	border-style: outset;
	margin: 10px 5%;
}
#next_button {
	float: right;
}
#prev_button {
	float: left;
}
.button {
	border: 1px solid blue;
	width: 125px;
	height: 100%;
	background: blue;
}

This post has been edited by Crowz: 07 October 2012 - 05:30 PM


Is This A Good Question/Topic? 0
  • +

Replies To: selecting invisible or undisplayed items in mouseover event.

#2 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 85
  • View blog
  • Posts: 431
  • Joined: 04-December 08

Re: selecting invisible or undisplayed items in mouseover event.

Posted 07 October 2012 - 07:30 PM

Hellos!

I could be wrong but I don't think you can interact with an invisible div like that. However, you could change the opacity around. Something like this might work;

$(document).ready(function() {
$('.button').fadeTo(1,0); //set invisible on load
		
$('.button').hover(function() {
    $(this).fadeTo(1,1); //display on hover
    },function() {
        $(this).fadeTo(1,0); //back to hidden on mouse out
    });
});


Hope this helps.
Was This Post Helpful? 0
  • +
  • -

#3 Crowz  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 68
  • Joined: 09-February 12

Re: selecting invisible or undisplayed items in mouseover event.

Posted 07 October 2012 - 08:07 PM

View Postsas1ni69, on 07 October 2012 - 07:30 PM, said:

Hellos!

I could be wrong but I don't think you can interact with an invisible div like that. However, you could change the opacity around. Something like this might work;

$(document).ready(function() {
$('.button').fadeTo(1,0); //set invisible on load
		
$('.button').hover(function() {
    $(this).fadeTo(1,1); //display on hover
    },function() {
        $(this).fadeTo(1,0); //back to hidden on mouse out
    });
});


Hope this helps.



Ah, most excellent!
Thank you good sir!
Was This Post Helpful? 0
  • +
  • -

#4 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 85
  • View blog
  • Posts: 431
  • Joined: 04-December 08

Re: selecting invisible or undisplayed items in mouseover event.

Posted 07 October 2012 - 09:33 PM

You're most welcome! :bananaman:
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1