switching the color of a path in an SVG when hovering over a

In the midst of working on SVG, I'm trying to implement a color change effect upon hover. The desired functionality is such that when hovering over the .business div, the color of the SVG business path should also change accordingly as specified in the initial div. Similarly, if hovering over the SVG element itself, the color of the surrounding div should shift. 

Whether you hover over the .business div or the SVG, the color change should take place
. Furthermore, I aim to incorporate an active state upon hover for any SVG or div. Additionally, I seek assistance in adjusting the spacing between SVG paths. Can someone guide me through this?

.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>

javascriptjqueryhtmlcsssvg

Answer №1

To achieve the desired effect, JavaScript is required to create a simple hover function. I have implemented two classes with hover states that toggle between each other.

$('.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>

In order to toggle all elements effectively, a common identifier for both the path element and text is necessary for toggling purposes. Here, I have used a toggle attribute to achieve this functionality.

$('.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The latest grid system in Bootstrap 5 is designed to streamline

I'm attempting to use Bootstrap 5 to create a grid system similar to the image shown below View Image I've been struggling to replicate the grid section shown in the attached image using Bootstrap 5. <div class="container-fluid"> ...

htmlcssbootstrap-5

Why does the value become "Undefined" once it is passed to the controller function?

I am unsure why the console.log function returns "undefined". $scope.onSizeSelected = function(productId, sizeQtyPrice){ console.log('The selected size is: ' + sizeQtyPrice); $scope.updateSelectedProductBySizeSelected(productId ,sizeQtyPrice ...

javascriptangularjsng-controller

Typescript inheritance results in an undefined value being returned

I am trying to understand the code below, as I am confused about its functionality. In languages like C# or Java, using the base or super keyword usually returns values, whereas in TypeScript, I am receiving "undefined". However, when I switch from using " ...

javascripttypescriptes6-class

Developing 'Drop Down' Views in AngularJS

With AngularJS, I have successfully rendered a table containing a list of items with unique IDs for each row. Now, my goal is to create a pull-down view that allows users to see detailed information about each row. This pull-down view will include a nested ...

jqueryangularjs

Best practices for referencing attributes created with the data method in a Vue component

In my application, there is a section that displays a list of users along with a search box to filter names. The user information is fetched from a database and stored in app.users. I have created a component named 'user' to show the details of e ...

javascriptvue.jsvue-component

Tips for adjusting the dimensions of a child element to match its parent in Angular 12 with Typescript

I have included the child component in the parent component and I am displaying that child component within a col-md-8. What I want to achieve is to highlight a specific div in the child component with additional text, making it equal in size to the parent ...

cssangulartypescript

Utilize the Zend Framework to Customize the jQuery Date Picker for Localized Date Selection

I've been attempting to customize a datepicker with a locale other than English. I followed the instructions in the jQuery manual which suggested adding this line of code: $("#datepicker").datepicker($.datepicker.regional['fr']); to $view- ...

jqueryzend-frameworklocalizationdatepicker

Using Swagger with Next.js

Is it possible to generate Swagger documentation for API routes in NEXT.js? I am working with Next.js for both front-end and back-end tasks, and I am interested in creating a Swagger documentation for the APIs implemented in Next.js. ...

javascriptswaggernext.js

Ways to programmatically compare all elements between two separate arrays

Is there a way to create a process where the first loop iterates through the elements of one array, while another loop goes through a second array and compares each element in the first array with all elements in the second array? For example: //first loo ...

javascriptarraysloops

What is the best way to navigate and map through an array of objects, especially when encountering an empty object?

I am currently in the process of developing a bootleg version of Amazon with a focus on creating the Questions & Answers component. The issue I have encountered is that in my dummyData, there are instances where a product may not have any questions, lead ...

javascriptreactjs

When toggling between light and dark themes using the useMediaQuery hook, the Material-ui styling is being overridden

While working with next.js and material-ui, I encountered an issue where the theme would change based on user preference. However, when switching to light mode, the JSS Styles that I had set were being overwritten. This problem only seemed to occur in ligh ...

javascriptreactjsmaterial-uinext.jsjss

Previous and Next Button Navigation

Check out the pagination feature in the jsfiddle link provided: [jsfiddle.net/3u64cx2s/4/] The numbers for navigating through pages (1,2,3) are working correctly. However, there seems to be an issue with the previous and next buttons. When on page 1, cli ...

jquerypagination

What is the best way to transfer an image between Angular components and then showcase it?

I've developed a feature using an observable and I'm attempting to transfer a dataURL from one component to another in order to display it as an image. Here is the HTML code for the component where I want to send data from: <canvas id="p ...

javascriptangulartypescript

How to Identify and Print a Specific Property in a JSON Object using Node.js?

Hey there, I'm having trouble extracting the trackName from the JSON object provided here. I've tried accessing it using this code: console.log(res.text.results[0].trackName); but unfortunately, I keep getting this error message: TypeError: Cann ...

javascriptjsonnode.jssuperagent

Ensure that all MongoDB write operations have been completed before proceeding with a find operation

I am in need of a store js object that can manage a mongodb collection in a specific way: store.insert(thing); // triggered from a pubsub system without waiting for the insert to complete store.get(); // should return a promise that resolves to the items ...

javascriptnode.jsmongodbasynchronous

Modifying the input's value dynamically alters the selection choices in Vuetify

Choose the First option Fpo, when you select the first item, the first object in the list is assigned to the variable test. I have used test.name as a model for that input field. Strangely, when I try to modify the input field, the select option also chang ...

javascriptvue.jsvuetify.js

Expanding content to cover the entire width using CSS Bootstrap 5

As a newcomer to Bootstrap, I am working on customizing an existing Bootstrap example. My objective is to expand the width of the div tag (with id "inner") to fill the entire screen. I have experimented with various approaches, such as resetting the margi ...

htmlcsstwitter-bootstrapbootstrap-5

Changing the data of a child component that is passed through slots from a parent component in Vue.js

Exploring the world of components is new to me, and I'm currently trying to understand how the parent-child relationship works in components. I have come across component libraries that define parent-child components, such as tables and table rows: &l ...

javascriptvue.jsvue-component

To restore the position of the chosen object in Three.js after clicking reset

I am facing an issue with resetting the position of my latest Object in three.js. Initially, my code consists of the following: function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3( mouse ...

javascriptthree.jsdragevent-listener

Identify a duplicate class name element using Selenium

<ul class="k9GMp "> <li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">2</span> posts</span> </li> <li class="Y8-fY "><a class="-nal3 " href="/username/followers/" tabindex="0"><span ...

pythonhtmlseleniumclasshref