0

For starters, I'm using DW's liquid layout format. I have multiple containers in my layout, and what I am looking for is when you hover over the artwork button1, the opacity of both artwork1 and button1 will change, onward to artwork12 and button12. And vic-a-versa. I've tried using some javascript out there - particularly this one: jsfiddle

I'm wondering if it has something to do with my divs not connected to each other. However, if you look at my provided image, what I'm trying to affect is under the main .gridContainer. The black boxes have assigned dv ids, and fall under the button div - is that the correct way of doing things because I am very new to all of this.

</head>
<body>
<div class="gridContainer clearfix">
<div id="buttons">
<div id="button1">
<div id="artwork">
<div id="artwork1">

I would include more information, but I would like to keep this as simple as possible. Being very new to all of this, I don't want to make this more confusing. I'm thinking that my problem rests in trying to assign div ids to elements inside of another div, but I'm really not sure. Need some serious help from some smart people out there! Thanks. My reputation isn't high enough yet to post images to show what I'm trying to do.

20Greg13
  • 13
  • 6
  • 1
    what exactly is the problem? i see the fiddle working just as you specified is required – amphibient Mar 28 '13 at 21:26
  • looks like its working – btevfik Mar 28 '13 at 21:30
  • The only idea that comes to my mind is to use `+` selector. – nd_macias Mar 28 '13 at 21:32
  • Have a look at this [jsbin](http://jsbin.com/urolaj/2/edit). I am supposing the divs are siblings and so I am using just CSS to do what you need. [If you want to know more about the ~ (General sibling combinator) selector.](http://stackoverflow.com/questions/10782054/what-does-the-css-tilde-squiggle-twiddle-selector-do) – Bertrand Mar 28 '13 at 21:45
  • This is the effect I'm after. But my concern is that the divs aren't siblings. This may be where my problem rests. Essentially I have one major div (gridcontainer), and the 12 buttons and 12 artworks rest inside their respective divs (buttons & artwork) - essentially they're just images with ids assigned, and the buttons and artwork divs rest inside the gridcontainer. – 20Greg13 Mar 28 '13 at 21:52
  • It works the same. The order they appear is important, maybe you are missing that, check this [jsbin](http://jsbin.com/urolaj/3/edit) you will see that the first div group works, because the artwork comes after the buttons (#buttons:hover ~ #artwork { opacity:0.1 }), the second div has the order inverted and it does not work. – Bertrand Mar 28 '13 at 22:19
  • Anyway because you have 12 groups I think it is better with JS (less code) so I also put a jQuery command in the [jsbin](http://jsbin.com/urolaj/6/edit) as well. – Bertrand Mar 28 '13 at 22:44
  • I'm still struggling. I'm sorry for my lack of understanding here. One major thing I noticed that perhaps I didn't explain too well is the structure of how I've layed things out. – 20Greg13 Mar 29 '13 at 05:36
  • My structure is as follows: head body html
    -
    – 20Greg13 Mar 29 '13 at 05:52

1 Answers1

0

Take a look at jQuery fadeTo , hover, and not

I don't know if this is the exact effect you were going for but it should give you some ideas.
http://jsfiddle.net/gU4sw/655/

$('.item,.region').hover(
//Hover In
function () {
$('.item,.region').not(this).not($("#" + $(this).attr('id') + 'match')).fadeTo("fast",.5);
}, 
//Hover out
function () {
$('.item,.region').fadeTo("fast", 1);
});