Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>@Marc Audet: The first sentence describes preciously what isn't working. When hovering the second div, the first div doesn't fade. </p> <p>The problem is that you what to select the previous sibling. Looking at this <a href="https://stackoverflow.com/a/1817801/1930721">link</a>, I think you can't fix it this way.</p> <p>You could however fix it with JQuery HTML:</p> <pre><code>&lt;div class="mainBox"&gt; &lt;div class="mask portfolio_box_skin_2"&gt; &lt;div class="portfolio_image_skin2"&gt; Content1 &lt;/div&gt; &lt;div class="cleardiv"&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt; &lt;div class="mainBox"&gt; &lt;div class="mask portfolio_box_skin_2"&gt; &lt;div class="portfolio_image_skin2"&gt; Content2 &lt;/div&gt; &lt;div class="cleardiv"&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt; &lt;div class="mainBox"&gt; &lt;div class="mask portfolio_box_skin_2"&gt; &lt;div class="portfolio_image_skin2"&gt; Content3 &lt;/div&gt; &lt;div class="cleardiv"&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt; &lt;div class="mainBox"&gt; &lt;div class="mask portfolio_box_skin_2"&gt; &lt;div class="portfolio_image_skin2"&gt; Content4 &lt;/div&gt; &lt;div class="cleardiv"&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.mainBox { width:100px; height:100px; float:left; } .portfolio_image_skin2 { width:100px; height:100px; margin-right:10px; } .mask { opacity:1; background-color:#0CF; } .maskHover { /* CSS */ display:block!important; opacity:0.5; transition: 0.5s all; padding-right:19px; } </code></pre> <p>JQUERY:</p> <pre><code>$(".mainBox").hover(function(){ $( ".mainBox" ).each(function() { $(this).children(".mask").toggleClass('maskHover'); }); $(this).children(".mask").removeClass('maskHover'); }); </code></pre> <p>Check <a href="http://jsfiddle.net/BCwFX/3/" rel="nofollow noreferrer">JSFiddle</a></p>
    singulars
    1. This table or related slice is empty.
    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.
 

Querying!

 
Guidance

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