Databases
StackOverflow2013
Postsdbo
POHover on one div affects another
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHover on one div affects another
    primarykey
    data
    text
    <p>I researched other questions similar to mine and have been pointed in the right direction, but I believe my case is a bit different. I am new to CSS so bear with me please! I am trying to make a logo that is interactive on hover. I have had some success but want to make it better. The logo is comprised of two images, a rake and another image that is text on top of it. On hover, I want the rake to make a raking motion, but have the text remain static. I have successfully made the rake (bottom image) move on hover but it is hard to get your cursor on just the rake (bottom image) is covered by the text (top image) I have this HTML:</p> <pre><code>&lt;div id="container"&gt; &lt;div class="logo"&gt; &lt;img src="rake-logo-top.png" width="214" height="170" /&gt; &lt;/div&gt; &lt;div class="vertpan pic"&gt; &lt;img src="rake-logo-bottom.png" &gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#container { height:304px; width: 246px; margin: 20px; cursor: pointer; } .logo { position: absolute; z-index: 2; padding-top: 105px; padding-left: 15px; } .pic { height: 304px; width: 246px; overflow: hidden; } /*VERTPAN*/ .vertpan img { position: relative; margin-top: 100px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; z-index: 1; } .vertpan img:hover { margin-top: 0px; } </code></pre> <p>I know this can be done with something along the lines of this:</p> <pre><code>#container:hover + vertpan img { margin-top: 100px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; z-index: 1; } </code></pre> <p>But that is not quite correct. The "vertpan" code was pre-formatted and I am changing it. Basically I want to hover on either #container or .logo and have the same reaction as I get when hover on just the .pic. I have tried a few times and am stuck...is it because I already have the hover effect on .pic?</p> <p>Any help is appreciated!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USBeau
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHover on one div affects another
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POHover on one div affects another
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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