Hello, I can not make out how to make the same effect as here when hovering over the product, I tried using the css sign ~ having one parent, but I realized that this option would not work for me, or I didn’t realize it.

Here's what I got:

HTML:

<div class="items"> <div class="item"> <h1>заголовок</h1> </div> <div class="info"> Доп. Инфо </div> </div> <div class="items"> <div class="item"> <h1>заголовок</h1> </div> <div class="info"> Доп. Инфо </div> </div>

CSS:

 .items { width:224px; float:left; } .item { width:160px; height: 230px; display:block; border:1px solid gray; float:left; } .info { display:none; float:right; width:60px; height:230px; border:1px solid gray; } .item:hover~.info,.info:hover { display:block; }

http://jsfiddle.net/H3GmR/

Interests The Effect Additional Space When Hovering

It seems that something turned out to http://jsfiddle.net/H3GmR/1/, if anyone has better options, or who sees crutches / jambs and other information please, and then close the question.

  • Are you a principled person and an important reason for you? :), I did not succeed, and yes, I look forward to help :) - dogmar
  • so show me what exactly you didn’t work out - fiddle will be best. what do all the markup do for you? - zb '22
  • @dogmar, According to the rules of the forum, questions should not be limited to the decision or the completion of student assignments. Please clarify what you have done yourself and what did not work out. - Artem
  • the site is done through js static.wildberries.ru/j/jsdata.js?2.2.59.1 in the region of 354 lines a function that changes active elements. - zb '
  • With css it’s going to be complicated here, it’s js right here static.wildberries.ru/j/jsdata.js all, it’s like the samopisny version, when you hover on a div the class of other elements changes and they become visible. It seems that somewhere I saw a plugin under jquery, I just don’t remember the name, if I can find a link. - ЬЬ_

1 answer 1

set the position absolute to the hidden block and the parent - relative;

 .items { width:161px; float:left; position: relative; } .item { width:160px; height: 230px; display:block; border:1px solid gray; } .info { position: absolute; background: white; top:0; left: 160px; display:none; float:right; width:60px; height:230px; border:1px solid gray; z-index: 100; }

http://jsfiddle.net/oceog/H3GmR/3/ so want? (no need to bother with ~ here, just hover on items)