Databases
StackOverflow2013
Postsdbo
POHow to run multiple css selector classes at once?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to run multiple css selector classes at once?
    text
    copied!<p>I'm new to web design and I'm working on a small project, but I'm faced with a problem and I would appreciate any help.</p> <p>So I have three div containers and I'm using them to show thumbnails of photos inside an album and I've given each one of them a CSS :hover selector and I want all three classes to run at once when the mouse is over any one of the divs. I tried to simulate a mouseover event but it didn't work and I tried to setattribute with javascript didn't work either. Here is my css.</p> <pre><code> #frame { border: solid 2px black; background-image:url(cpHDFLI6_mini.jpg); background-repeat:no-repeat; position:absolute; top:87px; right:183px; left:auto; display: block; width: 60px; height: 70px; -o-transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg); } #frame1 { border: solid 2px black; background-image:url(20397.jpg); background-repeat:no-repeat; position:absolute; top:75px; right:228px; left:auto; display: block; width: 60px; height: 70px; z-index:1; } #frame2 { border: solid 2px black; background-image:url(candle.jpg); background-repeat:no-repeat; position:absolute; top:87px; right:273px; left:auto; display: block; width: 60px; height: 70px; -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); transform: rotate(-30deg); z-index:0; } #frame2:hover { opacity: 1; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); } #frame1:hover { opacity: 1; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); } #frame:hover { opacity: 1; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); } </code></pre> <p>If you don't understand what I want I can explain more.</p>
 

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