HTML tree full width hover effect

Question

У меня есть дерево html, которое в основном состоит из вложенных неупорядоченных списков.

Мне нужно создать эффект зависания всей ширины для каждого листа, что-то похожее на эффект наложения дерева дерева файлов Windows.

Эффект парения является <div/> с цветом фона и границей.

Я сделал хак, который имитирует полную ширину, но боковые границы больше не видны.

Есть ли трюк CSS, который я могу использовать, чтобы также сохранить боковые границы эффекта наведения и по-прежнему иметь полную ширину?

Я сделал пример jsfiddle, поэтому его легче понять.

Примечание: Я не могу изменить структуру HTML дерева или CSS, потому что он создан плагин третьей стороной (кендо UI TreeView), поэтому мне нужно найти решение, используя то, что у меня есть.

CSS:

h6 { font-size: 16px; font-weight: normal; margin-bottom: 10px; margin-top: 0; } 

.tree { width: 300px; border: 1px solid #000; padding: 10px; margin-bottom: 15px; } 
.tree ul { margin: 0; padding: 0; list-style-type: none; } 
.tree ul li { padding-left: 16px; } 

.tree li .item { position: relative; } 
.tree li .item .overlay 
{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; 
    background-color: #C5E7E6; display: none; border: 1px solid red; } 
.tree li .item:hover .overlay { display: block; } 

/*Full width hack*/ 
.tree.fullWidth { overflow: hidden; } 
.tree.fullWidth li .item .overlay { left: -100px; width: 1000px; } 

HTML

<h6>Normal overlay - not full width</h6> 
<div class="tree"> 
    <ul> 
     <li> 
      <div class="item"> 
       Node 1 
       <div class="overlay"></div> 
      </div> 
      <ul> 
       <li> 
        <div class="item selected"> 
         Node 2 
         <div class="overlay"></div> 
        </div> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

<h6>Full width overlay (but side borders aren't visible anymore)</h6> 
<div class="tree fullWidth"> 
    <ul> 
     <li> 
      <div class="item"> 
       Node 1 
       <div class="overlay"></div> 
      </div> 
      <ul> 
       <li> 
        <div class="item selected"> 
         Node 2 
         <div class="overlay"></div> 
        </div> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

Решение, изменяющее только часть CSS под «взломом». Я полагаю, что по крайней мере, вы можете изменить, что

CSS

/*Full width hack*/ 
.tree.fullWidth { overflow: hidden; } 
.tree.fullWidth li .item .overlay { right: -8px; width: 314px; left: auto !important; } 

demo

Если дерево имеет переменную ширину, это лучше:

.tree.fullWidth li .item .overlay { 
    right: -8px; 
    width: 300px; 
    padding-left: 14px; 
    left: auto !important; 
} 

Он работает точно как и в другой версии, но теперь ширина такая же, как ширина дерева, поэтому Javascript не нужно устанавливать magic ширина (что вы не знаете, откуда оно:

Answer 2

я столкнулся с аналогичной ситуацией несколько дней назад.

Heres 1 способ приблизиться к нему (при условии, у вас есть полный контроль над HTML)

HTML

<div class="tree relative"> 
    <ul> 
     <li> 
      <div class="item"> 
       <div class="overlay"></div> 
       <span class="relative">Node 1</span> 

      </div> 
      <ul> 
       <li> 
        <div class="item selected"> 
         <div class="overlay"></div> 
         <span class="relative">Node 2</span> 
        </div> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS

.relative { 
    position:relative; 
} 

.tree { 
    width: 300px; 
    border: 1px solid #000; 
    padding: 10px; 
    margin-bottom: 15px; 
} 

.tree ul { margin: 0; padding: 0; list-style-type: none; } 
.tree ul li { padding-left: 16px; } 

/*.tree li .item { position: relative; }*/ 

.tree li .item .overlay { 
    position: absolute; 
    left: 0; 
    right:0; 
    /* 
    top: 0; 
    width: 100%; 
    height: 100%; 
    */ 
    height:26px; /* well, thats a bummer */ 
    background-color: #C5E7E6; 
    display: none; 
    border: 1px solid red; 
} 
.tree li .item:hover .overlay { display: block; } 

Fiddle: http://jsfiddle.net/Varinder/5fKP4/2/

Answer 3

У меня была такая же проблема, как и вы, после некоторых попыток и испытаний я придумал это.Это позволяет вам добавлять полосы прокрутки и помещать прокладку на внутреннюю.

HTML

<div class="tree" style="width:256px; height:256px;"> 
    <div> 
     <ul> 
      <li> 
       <div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div> 
      </li> 
      <li> 
       <div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div> 
       <ul> 
        <li> 
         <div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 
</div> 

CSS

.tree { 
    position:relative; 
    display: block; 
    overflow: auto; 
    border: 1px solid #8B9097; 
    background-color: #fff; 
    margin-left:200px; 
    /*! margin-left: just for testing */ 
} 
.tree > div { 
    display:block; 
    position:absolute; 
    min-width:100%; 
} 
.tree * { 
    white-space: nowrap; 
} 
.tree ul { 
    margin:0; 
    list-style-type: none; 
    padding-left: 20px; 
} 
.tree li > div { 
    position:relative; 
    margin-left:-100000px; 
    padding-left:100000px; 
    border: 1px solid transparent; 
    display:block; 
} 
.tree li div:hover { 
    background-color: #B6BABF; 
    color: #fff; 
} 
.tree li.collapsed > ul { 
    display:none; 
} 

.tree li.expanded > ul { 
    display:inherit; 
} 

http://jsfiddle.net/WknDZ/17/