Databases
StackOverflow2013
Postsdbo
POIs there any way to hover over one element and affect a different element?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs there any way to hover over one element and affect a different element?
    text
    copied!<p>I want it to be as simple as this, but I know it isn't:</p> <pre><code>img { opacity: 0.4; filter: alpha(opacity=40); } img:hover { #thisElement { opacity: 0.3; filter: alpha(opacity=30); } opacity:1; filter:alpha(opacity=100); } </code></pre> <p>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?</p> <p>So this is the HTML</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="briefcase.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="taskbar.css"/&gt; &lt;link rel="stylesheet" type="text/css" href="briefcase.css" /&gt; &lt;title&gt;Briefcase&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="mask"&gt;&lt;/div&gt; &lt;div class="float"&gt; &lt;div id="album1"&gt;Album Title&lt;/div&gt; &lt;img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" /&gt; &lt;img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" /&gt; &lt;img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" /&gt; &lt;/div&gt; &lt;div class="gradientTop"&gt;&lt;/div&gt; &lt;div class="gradientBottom"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And this is the CSS:</p> <pre><code>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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload