Javascript Column Hover

我在這裏遇到了一些問題，如果有人能幫助我，那將會很棒。最近，我爲客戶端創建了一個包頁面，幷包含JS懸停效果，這樣我就可以在Bootstrap中使用不同列將所有元素懸停在一起。現在，這可能是簡單的，但我在哪裏卡住是，我給一個示例圖像列之間的短空..Javascript Column Hover

enter image description here

的JS：

var classes = ["el1", "el2", "el3", "el4", "el5", "el6", "el7", "el8", "el9","el10","el11","el12", "el13","el14","el15","el16","el17","el18","el19","el20","el21","el22", "el23", "el24","el25" ]; //list of your classes 
var elms = {}; 
var n = {}, nclasses = classes.length; 
function changeColor(classname, color) { 
    var curN = n[classname]; 
    for(var i = 0; i < curN; i ++) { 
     elms[classname][i].style.backgroundColor = color; 
    } 
} 
for(var k = 0; k < nclasses; k ++) { 
    var curClass = classes[k]; 
    elms[curClass] = document.getElementsByClassName(curClass); 
    n[curClass] = elms[curClass].length; 
    var curN = n[curClass]; 
    for(var i = 0; i < curN; i ++) { 
     elms[curClass][i].onmouseover = function() { 
      changeColor(this.className, "#dbdbdb"); 
     }; 
     elms[curClass][i].onmouseout = function() { 
      changeColor(this.className, "transparent"); 
     }; 
    } 
};

的HTML：

<div id="packagecontent" class="container-fluid" style="display: block;"> 
<div class="row"> 
<div class="clearfix"></div> 

<div class="col-xs-4 col-md-4" id="pkg-main-col"> 
    <div class="row pkg-inner"> 
    <div class="header-image wp-image-404 size-full" style="visibility: hidden;"></div> 
    <div class="pkg-pricing"> 
     <h5>PRICING</h5> 
     <ul class="package-cat" style="text-align:left;"> 
      <li class="el1">Monthly Pricing (Billed Annually)</li> 
      <li class="el2">Monthly Pricing (Billed Monthly)</li> 
      <li class="el3">Products</li> 
      <li class="el4">Competitors</li> 
     </ul> 
    </div> 

    <div class="pkg-competitor-comparison"> 
     <h5>COMPETIROR COMPARISON</h5> 
     <ul class="package-cat" style="text-align:left;"> 
      <li class="el5">Products*</li> 
      <li class="el6">Prices*</li> 
      <li class="el7">Attributes*</li> 
      <li class="el8">Images*</li> 
      <li class="el9">Related Products*</li> 
      <li class="el10">Videos*</li> 
     </ul> 
    </div> 

    <div class="pkg-post-comparison-processing"> 
     <h5>POST-COMPARISON PROCESSING</h5> 
     <ul class="package-cat" style="text-align:left;"> 
      <li class="el11">Attributes*</li> 
      <li class="el12">Images*</li> 
      <li class="el13">Related Videos*</li> 
      <li class="el14">Videos*</li> 
      <li class="el15">Reviews*</li> 
      <li class="el16">SEO Friendly product descriptions*</li> 
     </ul> 
    </div> 

    <div class="pkg-support"> 
     <h5>SUPPORT</h5> 
     <ul class="package-cat" style="text-align:left;"> 
      <li class="el17">Full Knowledge base*</li> 
      <li class="el18">Launch guidance*</li> 
      <li class="el19" >Email Support*</li> 
      <li class="el20">Phone Support*</li> 
     </ul> 
    </div> 

    <div class="pkg-compatibility"> 
     <h5>COMPATIBILITY</h5> 
     <ul class="package-cat" style="text-align:left;"> 
      <li class="el21">Support all e-commerce software*</li> 
     </ul> 
    </div> 

    <div class="pkg-reporting"> 
     <h5>REPORTING</h5> 
     <ul class="package-cat" style="text-align:left;"> 
      <li class="el22">User Friendly Dashboard*</li> 
      <li class="el23">Import-Export Tool*</li> 
      <li class="el24">Easy to print reports*</li> 
     </ul> 
    </div> 

    <div class="pkg-access-security"> 
     <h5>Security and access</h5> 
     <ul class="package-cat" style="text-align:left;"> 
      <li class="el25">SSL Encription*</li> 
     </ul> 
    </div> 
</div> 
</div> 

<div class="col-xs-2 col-md-2" id="pkg-col"> 
    <div class="row pkg-inner"> 

    <div class="header-image wp-image-404 size-full"> <p>FREE</p></div> 
    <div class="pkg-pricing col-data"> 
     <ul class="package-cat"> 
      <li class="el1">&pound; 0/month</li> 
      <li class="el2">&pound; 0/month</li> 
      <li class="el3">10</li> 
      <li class="el4">1</li> 
     </ul> 
    </div> 

    <div class="pkg-competitor-comparison col-data"> 
     <ul class="package-cat"> 
      <li class="el5"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el6"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el7"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el8"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el9"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el10"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-post-comparison-processing col-data"> 
     <ul class="package-cat"> 
      <li class="el11"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el12"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el13"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el14"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el15"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el16"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-support col-data"> 
     <ul class="package-cat"> 
      <li class="el17"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el18"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el19">24/7</li> 
      <li class="el20"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-compatibility col-data"> 
     <ul class="package-cat"> 
      <li class="el21"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-reporting col-data"> 
     <ul class="package-cat"> 
      <li class="el22"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el23"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el24"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-access-security col-data"> 
     <ul class="package-cat"> 
      <li class="el25"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 
    </div> 
</div> 

<div class="col-xs-2 col-md-2" id="pkg-col"> 
    <div class="row pkg-inner"> 
    <div class="header-image wp-image-404 size-full"><p>BASIC</p></div> 
    <div class="pkg-pricing col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el1">&pound; 25/month</li> 
      <li class="el2">&pound; 29/month</li> 
      <li class="el3">50</li> 
      <li class="el4">1</li> 
     </ul> 
    </div> 

    <div class="pkg-competitor-comparison col-data"> 
     <ul class="package-cat " style="list-style-type: none;display:block;"> 
      <li class="el5"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el6"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el7"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el8"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el9"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el10"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-post-comparison-processing col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el11"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el12"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el13"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el14"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el15"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el16"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-support col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el17"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el18"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el19">24/7</li> 
      <li class="el20"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-compatibility col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el21"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-reporting col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el22"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el23"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el24"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-access-security col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el25"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 
</div> 
</div> 

<div class="col-xs-2 col-md-2" id="pkg-col" > 
    <div class="row pkg-inner"> 
    <div class="header-image wp-image-404 size-full"><p>PROFESSIONAL</p></div> 
    <div class="pkg-pricing col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el1">&pound; 99/month</li> 
      <li class="el2">&pound; 109/month</li> 
      <li class="el3">unlimited</li> 
      <li class="el4">unlimited</li> 
     </ul> 
    </div> 

    <div class="pkg-competitor-comparison col-data"> 
     <ul class="package-cat " style="list-style-type: none;display:block;"> 
      <li class="el5"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el6"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el7"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el8"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el9"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el10"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-post-comparison-processing col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el11"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el12"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el13"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el14"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el15"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
      <li class="el16"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-support col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el17"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el18"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el19">24/7</li> 
      <li class="el20"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-compatibility col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el21"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-reporting col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el22"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el23"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el24"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-access-security col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el25"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 
</div> 
</div> 

<div class="col-xs-2 col-md-2" id="pkg-col"> 
    <div class="row pkg-inner"> 

    <div class="header-image wp-image-404 size-full"><p>ENTERPRISE</p></div> 
    <div class="pkg-pricing col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el1">&pound; 249/month</li> 
      <li class="el2">&pound; 269/month</li> 
      <li class="el3">unlimited</li> 
      <li class="el4">unlimited</li> 
     </ul> 
    </div> 

    <div class="pkg-competitor-comparison col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el5"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el6"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el7"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el8"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el9"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el10"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-post-comparison-processing col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el11"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el12"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el13"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el14"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el15"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el16"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-support col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el17"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el18"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el19">24/7</li> 
      <li class="el20">8/5</li> 
     </ul> 
    </div> 

    <div class="pkg-compatibility col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el21"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-reporting col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el22"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el23"><i class="fa fa-check" style="color:green;"></i></li> 
      <li class="el24"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 

    <div class="pkg-access-security col-data"> 
     <ul class="package-cat" style="list-style-type: none;display:block;text-align:center;"> 
      <li class="el25"><i class="fa fa-check" style="color:green;"></i></li> 
     </ul> 
    </div> 
</div> 
</div> 
</div> 
</div>

來源

2014-12-03 Fahad Sohail

你可以把這個放到codepen或js小提琴嗎？如果我明白你在做什麼之後，你不應該需要javascript來完成這個任務。 – Todd 2014-12-03 01:16:24

所以你想讓懸停效果也出現在空白處？ – 2014-12-03 01:24:40

你是否徘徊並突出顯示「行」......你不斷提及專欄，但那麼短小的差距不會是一個問題。我看到的差距是在引導列之間。基本上，您需要修改CSS以消除（它應該是一個保證金餘量，保證金正確的問題）之間的差距。 – rfornal 2014-12-03 01:26:20

首先，你可以使用CSS來做到這一點：

el1.hover{ ... }

指定在懸停期間發生的情況。現在，你繼承人如何做到這一點：

方法1：在CSS創建一個新的div

爲<ul class='package-cat'>內的每一行創建一個部門。

<div class="selectBox"/>

然後，在CSS中，設置默認狀態爲隱藏，並分別設置高度或寬度：

.selectBox{ 
    visibility: none; 
    width: 100%; 
    height: 100%; 
    background-color: COLOR_WHEN_HOVERING; 
}

，然後添加在CSS懸停改變能見度可見。

.selectBox:hover{ 
    visibility: visible; 
}

田田！

編輯：確保在文本之前創建着色div，以便它不會覆蓋它。

方法2：更換邊距/填充用的div並添加類

這一個很簡單 - 卸下其他的div的左側和右側的所有利潤，以及僅是爲了提供新的div替換它們每個原始div之間的有色邊距。

<div class="marginDiv"/>

CSS：

.marginDiv{background-color: COLOR_WHEN_NOT_HOVERING; width: SPACING;} 
.marginDiv:hover{background-color: COLOR_WHEN_HOVERING}

萬歲！

來源

2014-12-03 01:51:39 DaemonOfTheWest

感謝您的答覆隊友。我已經做了很多事情來做出這種迴應，弄得邊緣是我想做的最後一件事。你可以在JSfiddle（jsfiddle.net/dffn1L4u/1）的第一段實現你的方法1，所以我可以瞭解你的方法嗎？我會非常感謝.. – 2014-12-03 02:39:10

嘿法赫德！對不起，花了這麼長的時間來回復。我發現一個更簡單的方法來做到這一點，將很快張貼小提琴 – DaemonOfTheWest 2014-12-03 03:49:57

http://jsfiddle.net/dffn1L4u/4/ 新的方法涉及使絕對的div和使其寬度可笑地高。但我無法弄清楚如何讓文本超出div。至於原始的方法，我沒有正確地看你的代碼，結果你使用的標準垂直表 - 這是不兼容的。真對不起。 – DaemonOfTheWest 2014-12-03 04:03:55

Javascript Column Hover

回答

相關問題