HTML樹全寬懸停效果

Question

我有一個大多由嵌套無序列表組成的html樹。

我需要爲每個葉子創建一個全寬度盤旋效果，與Windows文件菜單樹盤旋效果類似。

懸停效果是<div/>與背景顏色和邊框。

我做了一個模擬全寬的黑客，但橫向邊界不再可見。

是否有一個CSS技巧，我可以使用以保持懸停效果的橫向邊界，仍然有全寬？

我做了一個jsfiddle的例子，所以比較容易理解。

注： 我不能改變的HTML樹結構或CSS，因爲它是由第三方插件（劍道UI樹視圖）創建的，所以我需要用什麼，我必須找到一個解決方案。

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不需要設置一個魔術寬度（你不知道它來自哪裏：

Answer 2

我遇到了類似的情況，前幾天。

繼承人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; } 

小提琴：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/