悬停div svg路径颜色更改

时间：2019-06-27 05:43:11

标签： javascript jquery html css svg

我正在处理SVG，我想在悬停时更改颜色。当我们将鼠标悬停在.business div上时，SVG的业务路径颜色也会发生变化，就像我在第一个div中添加的那样；如果我将鼠标悬停在SVG上，然后div颜色更改hover on .business div or SVG color has to change，我想在悬停任何SVG或div上添加活动的颜色。我想增加SVG path之间的间隔。谁能帮助我。

.tp-section {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 50px;
  height: 100vh;
}

.tpc-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.tpc {
  flex-basis: 50%;
  height: 26%;
}

.tp-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tp-block {
  width: 35%;
}

.right {
  float: right;
}

.frag {
  fill: #4472c4;
  stroke: #FFFFFF;
  transition: fill 0.3s;
}

.center {
  fill: #00b0f0;
}

a:hover .frag6 {
  fill: #FFC722;
}

.tpc.tp-content-business:hover,
.frag6:hover .tpc-tp-content-business {
  background: #FFC722;
}

.tpc-tp-content-business:hover .frag6 {
  fill: #FFC722;
}

text {
  font-size: 10px;
  fill: #FFFFFF;
}
<div class="tp-section">
  <div class="tp-circle">
    <svg width="400" height="840" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
			<a xlink:href="#"><path class="frag1" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">Tech</text></a>
			<a xlink:href="#"><path class="frag2" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">ERP</text></a>
			<a xlink:href="#"><path class="frag3" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">trans</text></a>
			<a xlink:href="#"><path class="frag4" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">Mergers</text></a>
			<a xlink:href="#"><path class="frag5" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">Inno</text></a>
			<a xlink:href="#"><path class="frag6" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">Busi</text></a>
			<a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a>
		</svg>
  </div>
  <div class="tpc-info">
    <div class="tpc tp-content-business">
      <div class="tp-block">
        <p>Business etur adipiscing elit. </p>
      </div>
    </div>
    <div class="tpc tp-content-innovation">
      <div class="tp-block right">
        <p>Innovation consecnaeos.</p>
      </div>
    </div>
    <div class="tpc tp-content-mergers">
      <div class="tp-block">
        <p>Mergers adipiscing eaeos.</p>
      </div>
    </div>
    <div class="tpc tp-content-trans">
      <div class="tp-block right">
        <p>Trans consectceptos himenaeos.</p>
      </div>
    </div>
    <div class="tpc tp-content-erp">
      <div class="tp-block">
        <p>ERP onsectetur enaeos.</p>
      </div>
    </div>
    <div class="tpc tp-content-tech">
      <div class="tp-block right">
        <p>Tech adiptos himenaeos.</p>
      </div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

为此，您需要使用javascript，一个简单的悬停功能将起作用，我用悬停状态创建2个类并在它们之间切换

$('.tp-content-business,.frag6').hover(function() {
  $('.tp-content-business').addClass('activeBg');
  $('.frag6').addClass('activeFill');
},function() {
  $('.tp-content-business').removeClass('activeBg');
  $('.frag6').removeClass('activeFill');
})
.tp-section {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 50px;
  height: 100vh;
}

.tpc-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.tpc {
  flex-basis: 50%;
  height: 26%;
}

.tp-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tp-block {
  width: 35%;
}

.right {
  float: right;
}

.frag {
  fill: #4472c4;
  stroke: #FFFFFF;
  transition: fill 0.3s;
}

.center {
  fill: #00b0f0;
}



text {
  font-size: 10px;
  fill: #FFFFFF;
}
.activeFill {
  fill: #FFC722;
}
.activeBg {
  background: #FFC722;
}
path[class^=frag] {
stroke: #fff;
stroke-width: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tp-section">
  <div class="tp-circle">
    <svg width="400" height="840" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
			<a xlink:href="#"><path class="frag1" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">Tech</text></a>
			<a xlink:href="#"><path class="frag2" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">ERP</text></a>
			<a xlink:href="#"><path class="frag3" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">trans</text></a>
			<a xlink:href="#"><path class="frag4" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">Mergers</text></a>
			<a xlink:href="#"><path class="frag5" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">Inno</text></a>
			<a xlink:href="#"><path class="frag6" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">Busi</text></a>
			<a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a>
		</svg>
  </div>
  <div class="tpc-info">
    <div class="tpc tp-content-business">
      <div class="tp-block">
        <p>Business etur adipiscing elit. </p>
      </div>
    </div>
    <div class="tpc tp-content-innovation">
      <div class="tp-block right">
        <p>Innovation consecnaeos.</p>
      </div>
    </div>
    <div class="tpc tp-content-mergers">
      <div class="tp-block">
        <p>Mergers adipiscing eaeos.</p>
      </div>
    </div>
    <div class="tpc tp-content-trans">
      <div class="tp-block right">
        <p>Trans consectceptos himenaeos.</p>
      </div>
    </div>
    <div class="tpc tp-content-erp">
      <div class="tp-block">
        <p>ERP onsectetur enaeos.</p>
      </div>
    </div>
    <div class="tpc tp-content-tech">
      <div class="tp-block right">
        <p>Tech adiptos himenaeos.</p>
      </div>
    </div>
  </div>
</div>

要切换所有元素，您需要在路径元素和文本之间进行切换的通用标识符，我在这里使用了切换属性

$('.tpc').hover(function() {
var el = $(this).attr('toggle');
  $('[toggle="'+el+'"]').addClass('activeBg activeFill');
},function() {
  var el = $(this).attr('toggle');
  $('[toggle="'+el+'"]').removeClass('activeBg activeFill');
})
.tp-section {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 50px;
  height: 100vh;
}

.tpc-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.tpc {
  flex-basis: 50%;
  height: 26%;
}

.tp-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tp-block {
  width: 35%;
}

.right {
  float: right;
}

.frag {
  fill: #4472c4;
  stroke: #FFFFFF;
  transition: fill 0.3s;
}

.center {
  fill: #00b0f0;
}



text {
  font-size: 10px;
  fill: #FFFFFF;
}
.activeFill {
  fill: #FFC722;
}
.activeBg {
  background: #FFC722;
}
path.tpc {
stroke: #fff;
stroke-width: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tp-section">
  <div class="tp-circle">
    <svg width="400" height="840" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
			<a xlink:href="#"><path class="tpc" toggle="tp-content-innovation" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">Tech</text></a>
			<a xlink:href="#"><path class="tpc" toggle="tp-content-trans" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">ERP</text></a>
			<a xlink:href="#"><path class="tpc" toggle="tp-content-tech" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">trans</text></a>
			<a xlink:href="#"><path class="tpc" toggle="tp-content-erp" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">Mergers</text></a>
			<a xlink:href="#"><path class="tpc" toggle="tp-content-mergers" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">Inno</text></a>
			<a xlink:href="#"><path class="tpc" toggle="tp-content-business" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">Busi</text></a>
			<a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a>
		</svg>
  </div>
  <div class="tpc-info">
    <div class="tpc" toggle="tp-content-business">
      <div class="tp-block">
        <p>Business etur adipiscing elit. </p>
      </div>
    </div>
    <div class="tpc" toggle="tp-content-innovation">
      <div class="tp-block right">
        <p>Innovation consecnaeos.</p>
      </div>
    </div>
    <div class="tpc" toggle="tp-content-mergers">
      <div class="tp-block">
        <p>Mergers adipiscing eaeos.</p>
      </div>
    </div>
    <div class="tpc" toggle="tp-content-trans">
      <div class="tp-block right">
        <p>Trans consectceptos himenaeos.</p>
      </div>
    </div>
    <div class="tpc" toggle="tp-content-erp">
      <div class="tp-block">
        <p>ERP onsectetur enaeos.</p>
      </div>
    </div>
    <div class="tpc" toggle="tp-content-tech">
      <div class="tp-block right">
        <p>Tech adiptos himenaeos.</p>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题