Onhover DIV SVG изменение цвета пути - PullRequest
Новая
       1

Onhover DIV SVG изменение цвета пути

1 голос
/ 27 июня 2019

Я работаю над 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 Ответ

1 голос
/ 27 июня 2019

Для этого нужен 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>

Чтобы переключать все ваши элементы, вам необходим общий идентификатор для переключения между вашим элементом пути и текстом, здесь я использовал атрибут toggle 

$('.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...