Question

我在这里遇到了一些情况，如果有人可以帮助我会很棒。最近我为客户端创建了一个包页面并包含了一个JS悬停效果，这样我就可以使用Bootstrap中的不同列将所有元素悬停在一起。现在这可能很简单，但是我被困在哪里是列之间的短空间，我给出了一个示例图像..

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>

Answer 1

首先，您可以使用CSS执行此操作：

el1.hover{ ... }

指定仅在悬停期间发生的事情。现在，继续你如何做到这一点：

方法1：在CSS中创建新div

为<ul class='package-cat'>中的每一行创建一个分部。

<div class="selectBox"/>

然后，在CSS中，将默认状态设置为hidden，并分别设置高度OR宽度：

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

然后在CSS中添加一个悬停，将可见性更改为可见。

.selectBox:hover{
  visibility: visible;
}

多田！

编辑：确保在文本之前创建着色div，以便它不会覆盖它。

方法2：用div替换边距/填充并添加类

这个很简单 - 删除其他div左侧和右侧的所有边距，并用新的div替换它们，这些div仅用于在每个原始div之间提供彩色边距。

<div class="marginDiv"/>

CSS：

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

万岁！

Javascript列悬停

1 个答案: