Menu
I want it to be as simple as this, but I know it isn't:
img { opacity: 0.4; filter: alpha(opacity=40); } img:hover { #thisElement { opacity: 0.3; filter: alpha(opacity=30); } opacity:1; filter:alpha(opacity=100); } So when you hover over img, it changes the opacity of #thisElement to 30% and changes the opacity of the image to 100%. Is there a way to actually do this using only css?
So this is the HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script> <script type="text/javascript" src="briefcase.js"></script> <link rel="stylesheet" type="text/css" href="taskbar.css"/> <link rel="stylesheet" type="text/css" href="briefcase.css" /> <title>Briefcase</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <div class="mask"></div> <div class="float"> <div id="album1">Album Title</div> <img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" /> <img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" /> <img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" /> </div> <div class="gradientTop"></div> <div class="gradientBottom"></div> </body> </html> And this is the CSS:
body { font: normal small/3em helvetica, sans-serif; text-align: left; letter-spacing: 2px; font-size: 16px; margin: 0; padding: 0; } div.gradientTop { position: absolute; margin-top: 5px; z-index: 2; width: 206px; height: 30px; float: left; background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0)) } div.gradientBottom { position: absolute; margin-bottom: 5px; z-index: 2; width: 206px; height: 120px; float: left; bottom: -210px; background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) } div.float { border-right: 1px solid orange; position: absolute; z-index: 2; margin-left: 5px; margin-top: 5px; float: left; width: 200px; } div.mask { position: relative; z-index: 1; margin-top: 5px; float: left; width: 206px; height: 805px; background-color: white; } img.left { z-index: inherit; margin-bottom: 3px; float: left; width: 200px; min-height: 200px; /* for modern browsers */ height: auto !important; /* for modern browsers */ height: 200px; /* for IE5.x and IE6 */ opacity: 0.4; filter: alpha(opacity=40) } img.left:hover + #album1 { opacity: .4; } img.left:hover { opacity: 1.0; } #album1 { z-index: 2; width: 200px; color: white; text-align: center; position: absolute; background: orange; top: 70px; } 
967
If you have two elements in your HTML and you want to :hover over one and target a style change in the other the two elements must be directly related--parents, children or siblings. This means that the two elements either must be one inside the other or must both be contained within the same larger element.
for example you have a link attached to another link and you want to show both at hovering at one you can do it simply by specifying each individual's functions then at once at hovering both.
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
In the case of a descendent:
#parent_element:hover #child_element, /* or */ #parent_element:hover > #child_element { opacity: 0.3; } Which will apply to elements such as:
<div id="parent_element"> <div id="child_element">Content</div> </div> For adjacent siblings:
#first_sibling:hover + #second_sibling { opacity: 0.3; } Which works for mark-up such as:
<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div> In both cases the latter element in the selector is the one chosen.
Given your pseudo-code example, you probably want something like:
img:hover + img { opacity: 0.3; color: red; } JS Fiddle demo.
136
I know you're probably looking for a pure-css way of doing what you want, but I'd suggest you use HTML+CSS+JS as the wonderful MVC structure that they are.
It's the controlling aspect that should be taken advantage of here. You want to control a view of an item on a user interaction. That's exactly what JS is meant for.
With very minimal JavaScript, you could toggle a class on and off of #thisElement when the img is hovered over. It certainly beats playing CSS selector games, although I'd understand if you're only willing to accept a pure-css answer.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
