Всплывающие окна с текстом описания при наведении на вид материалов модуля видео

голоса: 0

Сейчас если навести курсор в виде материалов на "Таймкоды и описание урока" с лева появится $BRIEF$, тоесть описание материала.

Как реализовать это не при наведении на эти слова, а при наведении на весь блок вид материала. Чувствую что мне чу чуть не хватает ума довести это до ума))

стили всплывающего окна

  #raz {  visibility: hidden; }  #raz span {  visibility: visible;  color: #fff;    }  #raz:hover {  visibility: visible; }  #raz div {  position: fixed;  z-index: 9990;  padding-left: 15px;   background: #222;  color: #fff;  left: 0;  top: 280px;  width: 17%;   height: 50%;  }

шаблон вида материалов

  <?if($USER_AGENT_PDA$)?><?else?><div style="width:25%; float:left;"><?endif?> <div class="v-entry"> <div class="ve-screen" title="$TITLE$" style="background-image: url($SCREEN_URL$);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$SCREEN_URL$',sizingMethod='crop');width:$PRV_WIDTH$px;max-height:$PRV_HEIGHT$px;"><a href="$ENTRY_URL$"></a><div class="ve-length">$DURATION$</div></div>   <?if($FILTER2_VALUE$='Начальный')?><div class="colorline"></div><?endif?>  <?if($FILTER2_VALUE$='Средний')?><div class="colorline2"></div><?endif?>  <?if($FILTER2_VALUE$='Профессиональный')?><div class="colorline3"></div><?endif?> <div class="ve-details"> <div class="ve-details1"> <?if($CATEGORY_URL$)?><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a><?else?><br><?endif?> <div style="position:absolute;right: 0;top:4px;"><span class="ve-views"><i class="fa fa-eye" aria-hidden="true"></i>&nbsp;<?if($VI_READS$)?>$VI_READS$<?else?>0<?endif?></span> <a href="$ENTRY_PAGE$#comments" class="ve-comments"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp; <?if($COMMENTS_NUM$)?>$COMMENTS_NUM$<?else?>0<?endif?></a> <span class="ve-rating"><i class="fa fa-line-chart" aria-hidden="true"></i>&nbsp;$RATING$</span></div> </div>  <h4 class="ve-title">$MODER_PANEL_RIGHT$<a href="$ENTRY_URL$">$TITLE$</a></h4>  <?if($TAGS$)?><div class="ve-tags"><p><i class="fa fa-tags" aria-hidden="true"></i>&nbsp; $TAGS$</p></div><?endif?> <div id="raz">  <span>Таймкоды и описание урока</span>  <div>Таймкоды и описание урока:<br><br>$BRIEF$</div> </div>   </div>&nbsp; </div> <?if($USER_AGENT_PDA$)?><?else?></div><?endif?>

 

Адрес сайта http://zh-roman.com
| Автор: | Категория: Дизайн сайта

Ответов: 1

голоса: 0
 
Лучший ответ

Можно примерно так, в стили прописать:

#raz { width: 366px; height: 400px; position: relative; top: -348px; margin-left: -20px; }
#raz span {color: transparent!important;width: 366px;height: 400px;position: relative;top: -0px;margin-left: -0px;}
.v-entry a {position:relative;z-index:10;}

да, решение не универсальное так как при наведении на ссылки не работает.

| Автор:
Выбор ответа лучшим | | Автор: Roman Zheludkov
Спасибо за помощь. Я не стал стили менять. Дошли всё же мозги. Вся суть в правильно эрархии блоков в виде материалов. Всё прописал через div id   Теперь при наведении на любое место блока материала, меню категорий с лева подменяется на описание. Давольнно функционально считаю. Как на ваш взгляд? зацените
Roman Zheludkov,
Да, нормально. Также об этом сразу же подумал, но что-то были мысли, что блок будет скрыт так как внутри блока с стилями visibility: hidden;
...