Support NeoGAF

[tmaynard]

I've been searching for the past week on how to remedy this problem.

Basically, what I'm trying to accomplish is a series of boxes that will have images in them. When you hover over them another DIV within the boxes will slowly fade into view which will list information such as a title.

Anyway, I've scripted it out and it's working, but I when you hover over one box, it reveals EVERY boxes containing DIV or "title" in my case.

For an example, http://mayzard.com/jquery_help/

As you can see, you hover over one and then every boxes "titles" show up. So, what I need to do is to script it so that when I hover over a box, only THAT boxes title shows up.

The only way that I can think of doing it is giving every single box it's own class and styling information which is OVERKILL. There has to be a simple way!

Now, for my code:

The jQuery

<script type="text/javascript">
		$(document).ready(function(){
			$(".boxTitle").hide()
			$(".box").hover(function () {
				$(".boxTitle").fadeIn("slow");
				}, function() {
				$(".boxTitle").fadeOut("slow");
			});
		});

The HTML

<div class="boxContain">
	<div class="box"><div class="boxTitle">Title #1</div></div>			
	<div class="box"><div class="boxTitle">Title #2</div></div>
	<div class="box"><div class="boxTitle">Title #3</div></div>
	<div class="box"><div class="boxTitle">Title #4</div></div>			
</div>

The CSS

.boxContain {
  width: 800px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.box {
  width: 194px;
  height: 130px;
  background:#FFF;
  border: 1px solid #000000;
  margin: 0px 0px 0px 4px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  float: left;
  display: inline;
}

.box img {
  border: 0px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: block;
}

.boxTitle {
  width: 194px;
  height: 20px;
  background-color: #000000;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border: 0px;
}

.boxTitle p {
  font-family: Georgia, Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 11px;
  text-decoration: none;
  font-weight: bold;
  color: #FFFFFF;
  margin: 0px 0px 0px 4px;
  padding: 0px 0px 0px 0px;
  text-align: left;
}

 

[SA-X]

I'm new to jquery, but I think that if in your hover function you do $(this).children(".boxTitle").fadecrap should do the trick.

 

[Ferrio]

I'm new to jquery, but I think that if in your hover function you do $(this).children(".boxTitle").fadecrap should do the trick.

Only dabbled in jquery, but ya something like that'd work.

edit: Tested it, it works. $(this) breaks my brain coming from prototype though.

 

[tmaynard]

I'm new to jquery, but I think that if in your hover function you do $(this).children(".boxTitle").fadecrap should do the trick.

I'm very new myself. Don't understand everything very fluently, just enough to get by.

That was far too simple. I was thinking far too hard about it. Thanks so much!