Hover over the circle to expand its size, triggering the text to also grow larger

I am working on drawing an SVG circle pulled from a database along with its label. I am looking to have the stroke width of the circle and the text increase simultaneously when hovering over the circle. Would creating a CSS subclass be the best approach for this? I am still learning the ropes in this area so any guidance would be appreciated.

<circle class="circles"cx=',row[1],' cy=',row[2],' r="0.2"></circle>
<text class="text" x=',row[1],'y=',row[2],' transform="translate(0',move,')scale(-1,1) rotate(180)">',row[0],'</text>')       

.text {
font-size: 0.8px;
font-family: Verdana;
fill: peachpuff;
}

.text:hover {
font-size: 2px;
}   

.circles{
        fill:       cyan;


}
.circles:hover{
        stroke:       cyan;
        stroke-width:   0.4; 
 }
htmlcsssvg

Answer №1

Check out this illustration:

  • Enclose your circle and text within a single SVG container or use separate classes based on your needs.
  • Adjust the stroke-width attribute of the circle and the font-size for the text, modifying their values as needed when hovering over the container.

.circleS:hover circle{
stroke-width:5;
}
.circleS:hover text{
font-size:18px;
}
<svg height="100" width="100" class="circleS">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  <text x="25" y="50" fill="white">Random</text>
</svg>

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

Employing a Button with PHP

Here is the code I've been working on: <html> <form action="employee.php"> Enter Employee SSN to Delete:<br> <input type="number" name="ssnDel"> <br> <br> <input type="submit" value="Submit"> </form> ...

phphtml

Implementing SVG in React Component

I recently downloaded an SVG image with the intention of using it as a React component. However, when I pasted the SVG code into the functional component, I encountered error markers within the tags. What can I do to fix this issue so that I can successf ...

reactjssvgmaterial-uireact-functional-component

The React Bootstrap modal refuses to fully close no matter how many times I click away or even on the close button

I am facing an issue with a modal in my React component. When I open the modal, it does not completely close when I try to click away or hit the close button. The backdrop disappears but the modal itself remains on the screen. (Screenshots attached for r ...

cssreactjsreact-bootstrap

Creating a Distinctive HTML Structure with Div Percentage (HTML 4)

I am new to web design and have a unique approach; I believe in the importance of flexibility. It puzzles me why pixels (px) are commonly used instead of percentages, maybe my perspective is misunderstood. I've been on the hunt for a basic HTML layo ...

cssdomlayouthtml

"Customizable rectangular container with jagged edges created with Scalable Vector Graphics

Currently, I am undertaking a small project that involves creating a box with rough edges around some text. To achieve this effect, I am utilizing an SVG with unique edges similar to the design found at this link: (except mine is in SVG format). My goal ...

javascripthtmlcsssvg

Is it possible to utilize hCard for semantic markup exclusively for a business's contact information?

Can hCard be used to markup a business's contact information without including a personal name? According to the hCard guidelines, a name is required in the format (e.g. John Doe): . I am specifically trying to mark up just a business's contact d ...

htmlsemanticssemantic-markupmicroformats

Is there a way to make my red div switch its background color from red to green when I press the swap button?

How can I make the red div change its background color to toggle between red and green when I click on the swap button in the following code? $(document).ready(onReady); var numberOfClicks = 0; function onReady() { console.log('inside on ready ...

javascriptjqueryhtmlcss

(CSS) Unusual phantom white outline surrounding menu with no visible border

I've just finished creating my first multi-level drop-down menu, but I'm encountering two white border issues. The first white border appears at the bottom of the menu and seems to be related to the padding of the a-elements. The specific area in ...

htmlcssmenu

Tips for relocating a CSS button

I have designed two buttons using css and I am looking to align them below the title "forecast customer activity". Due to extensive styling in css, the code might appear lengthy. Requesting assistance with a solution after reviewing the following code snip ...

javascripthtmlcss

Create a randomly generated value in a JSON format

{ "description": "AppName", "name": "appName", "partnerProfile": { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f19090b1969c90989ddf929e9c">[email protected]</a>", "firstName": "John", ...

javascriptjqueryhtmljsonrandom

Selecting the next element in the DOM using Javascript

Here is the structure of my current setup: <div class="wrapper"> <div class="first"> <a class="button" href="">click</a> </div> <div class="second"> <div class="third"> S ...

javascripthtmlcsscoffeescriptanimated

Using jQuery to remove any HTML tags from user input

I have multiple inputs with text, but they are displaying with unwanted HTML tags. I attempted various solutions without success. Below is my jQuery code to extract data from a table: $(editModal+" #Website").val(n);; Here is an example of my input code: ...

javascriptphpjqueryhtml

python and html tutorial for adding text from bottom to top

Looking for help with rearranging lines in an HTML file? If you want the lines to be displayed in reverse order, here's an example: (1) (2) (3) You need them to appear like this: (3) (2) (1) try: record_cam.strHandler ...

pythonhtml

Using jQuery in Rails 3 to display the id of a td element

I am working with a 3x3 table that contains td elements with unique id's (id='a1'...id='c3'). I want to enable the user to click on any of these 9 td elements and receive an alert displaying the id of the clicked td. Below is my C ...

javascripthtmlruby-on-rails-3jquery-uicoffeescript

Is it possible to use the HTML script tag without specifying the type attribute as JavaScript? <script type="text/html"></script>?

While examining the source code of an HTML page, I stumbled upon the following snippet: <script id="searchItemTemplate" type="text/html"> <# var rows = Math.floor((Model.RecordsPerPage - 1) / 3 + 1); for (var i = 0; i < rows; ++i){ ...

asp.netjavascripthtmltagsscript-tag

The web server is unaware of the CSS and JS references

After loading my ASP.NET MVC project on the web server, I encountered an issue where none of my CSS and JS references were loaded. Some of the references in my default layout are listed below: <head> <link href="/Scripts/css/bootstrap ...

c#htmlcssasp.net-mvc

Body section CSS selector

Can a CSS selector be included within the body section of an HTML document? Here's an example of my code (although it is not functioning as expected): <html> <head> </head> <body> <div style= "a[target=_blank] {backgroun ...

javascripthtmlcss

Guide on implementing the recently established attribute ID using jQuery

In my code snippet, I am assigning a new id to a button. Here is the code: $("#update").click(function(){ $("#update").attr('id', 'cancel'); }); After changing the id, I want to make it functional again in jQuery by reverting it b ...

javascriptjqueryhtml

Struggling to forward JSON data via AJAX to Django without relying on jQuery

My goal is to utilize AJAX in conjunction with Django, but I want to achieve this without relying on jQuery. So far, I have made progress in sending URL encoded data from AJAX to Django successfully. However, I am currently facing an issue where I am unabl ...

javascripthtmljquerydjangoajax

Ensuring Consistent Headings While Scrolling

Imagine having headings structured like this: <h1 class="fixontop">heading 1</h1> content goes here. . . . long paragraph. <h1 class="fixontop">heading 2</h1> 2nd content goes here. . . . long paragraph. <h1 class="fixontop"> ...

javascriptjquerycss