html - CSS 条形图 : highlight every column of the same series on hover

Question

我有一个 CSS 条形图，我想在悬停时更改它。

首先，我希望所有颜色的 opacity 设置为 悬停时的 0.5(轻松!)，然后我想要悬停系列(每个颜色相同的条形图) ) 使其不透明度为 1。

我也在寻找一种方法来使它也适用于图表的图例。

body{margin:0}
.row{width:100%;display:inline-flex}
.container{width:100%;max-width:730px;float:left;margin:auto}

.chart{width:100%;height:300px;display:inline-flex;margin-bottom:80px;position:relative}
.group{position:relative;width:8%;height:100%;margin:0 1%;display:inline-flex}
[class*="bar"]{position:absolute;width:49.9999%;margin:0;opacity:1;bottom:0;transition:all 2s ease;max-height:0}
[class*="bar"]:nth-child(1){background-color:#ff7777}
[class*="bar"]:nth-child(2){background-color:#77b8ff;margin-left:50%}

.bar-341{height:85.25%}
.bar-278{height:69.5%}
.bar-264{height:66%}
.bar-246{height:61.5%}
.bar-189{height:47.25%}
.bar-137{height:34.25%}
.bar-105{height:26.25%}
.bar-102{height:25.5%}
.bar-92{height:23%}
.bar-58{height:14.5%}
.bar-49{height:12.25%}
.bar-43{height:10.75%}
.bar-37{height:9.25%}
.bar-18{height:4.5%}
.bar-14{height:3.5%}
.bar-10{height:2.5%}
.bar-6{height:1.5%}
.bar-5{height:1.25%}
.bar-3{height:0.75%}
.bar-2{height:0.5%}
.grouptxt{position:absolute;top:105%;width:100%;text-align:center;font-size:.95em}
.txtlabel{position:absolute;top:-30px;left:50%;width:100%;margin-left:-50%!important;text-align:center;font-size:.95em;transition:all 1s ease;opacity:0}
.legend{display:inline-block;position:absolute;top:17.5%;right:12.5%}
.leg{font-size:.95em;padding:5px}
.leg1:before,.leg2:before{width:25px;height:25px;margin:1px;content:'';position:absolute;left:-30px;margin-top:-3px;transition:all 2s ease}
.leg1:before{background-color:#ff7777}
.leg2:before{background-color:#77b8ff}
@media only screen and (max-width:750px){.grouptxt,.txtlabel{font-size:.8em;transform:rotate(-90deg);text-align:end}.grouptxt{top:110%}.chart{margin-bottom:90px}}
.chart [class*="bar"]{max-height:300px}
.chart .txtlabel{opacity:.8}

.chart:hover [class*="bar"]{opacity:.5}
[class*="bar"]:nth-child(1):hover{opacity:1}
[class*="bar"]:nth-child(2):hover{opacity:1}
[class*="bar"]:nth-child(1):hover .txtlabel{opacity:1}
[class*="bar"]:nth-child(2):hover .txtlabel{opacity:1}

.chart:hover .leg1:before,.chart:hover .leg2:before{opacity:.5}

<div class='row'><div class='container'>
<div class='chart'>
  <div class='group'>
    <div class='bar-341 bar1'><div class='txtlabel'>34,1</div></div>
    <div class='bar-278'><div class='txtlabel'>27,8</div></div>
    <div class='grouptxt'>A pé</div>
  </div>
  <div class='group'>
    <div class='bar-246 bar1'><div class='txtlabel'>24,6</div></div>
    <div class='bar-189'><div class='txtlabel'>18,9</div></div>
    <div class='grouptxt'>Ônibus</div>
  </div>
  <div class='group'>
    <div class='bar-137'><div class='txtlabel'>13,7</div></div>
    <div class='bar-264'><div class='txtlabel'>26,4</div></div>
    <div class='grouptxt'>Carro motorista</div>
  </div>
  <div class='group'>
    <div class='bar-105'><div class='txtlabel'>10,5</div></div>
    <div class='bar-58'><div class='txtlabel'>5,8</div></div>
    <div class='grouptxt'>Carro passageiro</div>
  </div>
  <div class='group'>
    <div class='bar-102'><div class='txtlabel'>10,2</div></div>
    <div class='bar-92'><div class='txtlabel'>9,2</div></div>
    <div class='grouptxt'>Metrô</div>
  </div>
  <div class='group'>
    <div class='bar-43'><div class='txtlabel'>4,3</div></div>
    <div class='bar-49'><div class='txtlabel'>4,9</div></div>
    <div class='grouptxt'>Escolar</div>
  </div>
  <div class='group'>
    <div class='bar-14'><div class='txtlabel'>1,4</div></div>
    <div class='bar-18'><div class='txtlabel'>1,8</div></div>
    <div class='grouptxt'>Trem</div>
  </div>
  <div class='group'>
    <div class='bar-6'><div class='txtlabel'>0,6</div></div>
    <div class='bar-37'><div class='txtlabel'>3,7</div></div>
    <div class='grouptxt'>Moto</div>
  </div>
  <div class='group'>
    <div class='bar-5'><div class='txtlabel'>0,5</div></div>
    <div class='bar-3'><div class='txtlabel'>0,3</div></div>
    <div class='grouptxt'>Táxi</div>
  </div>
  <div class='group'>
    <div class='bar-2'><div class='txtlabel'>0,2</div></div>
    <div class='bar-10'><div class='txtlabel'>1,0</div></div>
    <div class='grouptxt'>Bicicleta</div>
  </div>
  <div class='legend'>
    <div class='leg leg1'>Mulheres</div>
    <div class='leg leg2'>Homens</div>
  </div>
</div>
</div></div>

Answer 1

你可以使用 jquery 来解决这个问题:

$('.red-bar').hover(
    function(){
          $('.red-bar, .leg1').css({"opacity":"1"});
          $('head').append('<style>.leg1:before{opacity:1;} </style>');
          $('.blue-bar, .leg2').css({"opacity":".5"});
    },function(){
        $('.red-bar, .leg1').css({"opacity":"1"});
        $('.blue-bar, .leg2').css({"opacity":"1"});
});

    $('.blue-bar').hover(
    function(){
          $('.blue-bar, .leg2').css({"opacity":"1"});
          $('head').append('<style>.leg2:before{opacity:1;}</style>');
          $('.red-bar, .leg1').css({"opacity":".5"});
    },function(){
        $('.red-bar, .leg1').css({"opacity":"1"});
        $('.blue-bar, .leg2').css({"opacity":"1"});
});
  

body{margin:0}
.row{width:100%;display:inline-flex}
.container{width:100%;max-width:730px;float:left;margin:auto}

.chart{width:100%;height:300px;display:inline-flex;margin-bottom:80px;position:relative}
.group{position:relative;width:8%;height:100%;margin:0 1%;display:inline-flex}
[class*="bar"]{position:absolute;width:49.9999%;margin:0;opacity:1;bottom:0;transition:all 2s ease;max-height:0}
[class*="bar"]:nth-child(1){background-color:#ff7777}
[class*="bar"]:nth-child(2){background-color:#77b8ff;margin-left:50%}

.bar-341{height:85.25%}
.bar-278{height:69.5%}
.bar-264{height:66%}
.bar-246{height:61.5%}
.bar-189{height:47.25%}
.bar-137{height:34.25%}
.bar-105{height:26.25%}
.bar-102{height:25.5%}
.bar-92{height:23%}
.bar-58{height:14.5%}
.bar-49{height:12.25%}
.bar-43{height:10.75%}
.bar-37{height:9.25%}
.bar-18{height:4.5%}
.bar-14{height:3.5%}
.bar-10{height:2.5%}
.bar-6{height:1.5%}
.bar-5{height:1.25%}
.bar-3{height:0.75%}
.bar-2{height:0.5%}
.grouptxt{position:absolute;top:105%;width:100%;text-align:center;font-size:.95em}
.txtlabel{position:absolute;top:-30px;left:50%;width:100%;margin-left:-50%!important;text-align:center;font-size:.95em;transition:all 1s ease;opacity:0}
.legend{display:inline-block;position:absolute;top:17.5%;right:12.5%}
.leg{font-size:.95em;padding:5px}
.leg1:before,.leg2:before{width:25px;height:25px;margin:1px;content:'';position:absolute;left:-30px;margin-top:-3px;transition:all 2s ease}
.leg1:before{background-color:#ff7777; opacity: 1;}
.leg2:before{background-color:#77b8ff; opacity: 1;}
@media only screen and (max-width:750px){.grouptxt,.txtlabel{font-size:.8em;transform:rotate(-90deg);text-align:end}.grouptxt{top:110%}.chart{margin-bottom:90px}}
.chart [class*="bar"]{max-height:300px}
.chart .txtlabel{opacity:.8}

.chart:hover [class*="bar"]{opacity:.5}
[class*="bar"]:nth-child(1):hover{opacity:1}
[class*="bar"]:nth-child(2):hover{opacity:1}
[class*="bar"]:nth-child(1):hover .txtlabel{opacity:1}
[class*="bar"]:nth-child(2):hover .txtlabel{opacity:1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row'><div class='container'>
        <div class='chart'>
          <div class='group'>
            <div class='bar-341 bar1 red-bar'><div class='txtlabel'>34,1</div></div>
            <div class='bar-278 blue-bar'><div class='txtlabel'>27,8</div></div>
            <div class='grouptxt'>A pé</div>
          </div>
          <div class='group'>
            <div class='bar-246 bar1 red-bar'><div class='txtlabel'>24,6</div></div>
            <div class='bar-189 blue-bar'><div class='txtlabel'>18,9</div></div>
            <div class='grouptxt'>Ônibus</div>
          </div>
          <div class='group'>
            <div class='bar-137 red-bar'><div class='txtlabel'>13,7</div></div>
            <div class='bar-264 blue-bar'><div class='txtlabel'>26,4</div></div>
            <div class='grouptxt'>Carro motorista</div>
          </div>
          <div class='group'>
            <div class='bar-105 red-bar'><div class='txtlabel'>10,5</div></div>
            <div class='bar-58 blue-bar'><div class='txtlabel'>5,8</div></div>
            <div class='grouptxt'>Carro passageiro</div>
          </div>
          <div class='group'>
            <div class='bar-102 red-bar'><div class='txtlabel'>10,2</div></div>
            <div class='bar-92 blue-bar'><div class='txtlabel'>9,2</div></div>
            <div class='grouptxt'>Metrô</div>
          </div>
          <div class='group'>
            <div class='bar-43 red-bar'><div class='txtlabel'>4,3</div></div>
            <div class='bar-49 blue-bar'><div class='txtlabel'>4,9</div></div>
            <div class='grouptxt'>Escolar</div>
          </div>
          <div class='group'>
            <div class='bar-14 red-bar'><div class='txtlabel'>1,4</div></div>
            <div class='bar-18 blue-bar'><div class='txtlabel'>1,8</div></div>
            <div class='grouptxt'>Trem</div>
          </div>
          <div class='group'>
            <div class='bar-6 red-bar'><div class='txtlabel'>0,6</div></div>
            <div class='bar-37 blue-bar'><div class='txtlabel'>3,7</div></div>
            <div class='grouptxt'>Moto</div>
          </div>
          <div class='group'>
            <div class='bar-5 red-bar'><div class='txtlabel'>0,5</div></div>
            <div class='bar-3 blue-bar'><div class='txtlabel'>0,3</div></div>
            <div class='grouptxt'>Táxi</div>
          </div>
          <div class='group'>
            <div class='bar-2 red-bar'><div class='txtlabel'>0,2</div></div>
            <div class='bar-10 blue-bar'><div class='txtlabel'>1,0</div></div>
            <div class='grouptxt'>Bicicleta</div>
          </div>
          <div class='legend'>
            <div class='leg leg1'>Mulheres</div>
            <div class='leg leg2'>Homens</div>
          </div>
        </div>
        </div>
    </div>