Hover over a linked element to view more information

I am working on a design that involves a circle and text grouped together. There are 3 possible situations I need to implement:

1. When neither element is hovered over, only the circle should be visible.

2. When the circle is hovered over, both the circle and the linked text should appear.

3. When the text is hovered over, only the circle should remain visible.

So far, I have been able to successfully implement the first two scenarios as shown below:

.shape_text:hover .text {
  opacity: 1;
}

.text {
  opacity: 0;
}

.text:hover {
  opacity: 0;
}
<svg width="250" height="250">
  <g class="shape_text">
      <circle cx="30" cy="45" r="25" />
      <text class="text" x=0 y=100>That's a circle</text>
  </g>
</svg>

htmlcss

Answer №1

I find it quite unusual the way you described it: It states that the circle must always be visible (1,2,3) and the text should only show up when the circle is hovered upon (2), which can be easily achieved:

text {
  opacity: 0;
}

circle:hover + text {
  opacity: 1;
}
<svg width="250" height="250">
  <g class="shape_text">
      <circle cx="30" cy="45" r="25" />
      <text class="text" x=0 y=100>That's a circle</text>
  </g>
</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

adjusting the size of a CSS image sprite

I have an image called background.png with dimensions of 500X400 px, and a HTML div that is 150X100 px in size. My goal is to display a specific portion of the image background.png starting from the top-left coordinates (x: 50, y: 50) to the bottom-right ...

jquerycss

Leveraging a global variable value within an AJAX JSON POST request

I want to send a JSON post request to my Elasticsearch instance using AJAX. Is it possible to include a global variable's value in the 'data' section of the request? Could it look something like this? $(document).ready(function() { $(&ap ...

jqueryhtmlajax

Combining two flex elements with auto-growing capabilities in react-native

I am excited about using react-native to have a TextInput aligned with a MaterialIcons.Button in the same line. I have been trying to center these elements horizontally but haven't been successful with the code below: import React from 'react&apo ...

cssreact-nativeflexbox

I am currently facing a challenge with Bootstrap, as I am trying to design a webpage for small devices using a 1:4:1 format, but I am struggling to get it right

column 1 and column 3(left and right cols) have successfully passed the test case, but not column 2 (the middle one) that I have commented on in the code. Please help. Thank you. The problem has certain conditions that would have been easier to understa ...

htmlcssbootstrap-4

What is the process for implementing filtered HTML attributes in a directive?

I’ve created a custom directive that generates a popup menu by extracting data from HTML content. The purpose is to transform a group of Bootstrap carousel-compatible elements into a structured list. However, each .item element contains an attribute with ...

jqueryhtmlangularjstwitter-bootstrapangularjs-directive

The Angular framework seems to be causing a problem with a Bootstrap column that is supposed to fill 100% of the width

I am currently working on a page that consists of a side navigation bar and a content area. Here is a basic representation of its layout: https://i.sstatic.net/XcPQL.png [https://jsfiddle.net/hd46twu1/6/][2] While redeveloping the same application using ...

cssangulartwitter-bootstrapflexbox

Is there a way to specifically import only variables and mixins from Sass stylesheets?

Using the Zurb Foundation 4 (S)CSS framework has presented a challenge with massively duplicated styles. Each file that I import 'foundation' into brings along all of Foundation's styles, resulting in redundant declarations for body, .row, . ...

cssruby-on-railssasszurb-foundationmodularity

Guide on displaying an HTML view using data-mathjax-bind in AngularJS

Mathjax displays data perfectly in this view, but there's an issue when adding a line break in the textarea. For example: a) A b) B c) C When posted, it shows as: a) A b) B c) C I want it to display similar to how it appears with data-mathjax-bind: ...

javascripthtmlangularjs

Modify flex direction to column in response to changes in height of another div or when its content wraps

I am currently utilizing React MUI V5 and I am looking to modify the flex direction of a div from row to column when a preceding div changes in height or wraps. Below is a basic example of what I have implemented using plain HTML/CSS, but I am uncertain i ...

htmlcssreactjsflexboxmaterial-ui

The styling of the Material UI autocomplete listbox does not affect its appearance

I am working on an autocomplete feature that groups items by titles. I am trying to adjust the height of the first group to be different from the rest, but I am facing some challenges since there is no unique identifier for the ul component. To work around ...

cssreactjsmaterial-ui

The CSS selector within the website's URL

When a URL like www.example.com/#signup is entered, the browser focuses its view on the HTML element with the ID signup. Is this correct? Can the CSS style of the element be changed if it is focused in this way? For example, if there is a div element wit ...

htmlcssurlcss-selectors

Angular - applying the number pipe only when a value is present

While developing my shop app, I encountered an issue with the number pipe. Is there a way to format numbers like 64.90 to display two digits after the decimal point only if there is a value in the database, such as 64.9, and if it's 60 in the database ...

htmlangularfirebase

The text for the Django link is too verbose

When working on my Django app, I encountered an issue in the detail view where links to attached files in a Post are displayed. The problem arises when the link is too long and extends beyond the border. Is there a way to only show a portion of the link if ...

htmldjangohyperlink

Find the exact length of a string in an HTML5 canvas

In my HTML5 canvas project, I am overlaying text on an image (creating a meme generator). My goal is to determine the perfect font size so that the text covers the entire width of the canvas. Is there a JavaScript solution to calculate the ideal font size ...

javascripthtmltextcanvasfonts

Update Personal Information with PHP and MySQL

i have two files named edit.php and update.php. The content of edit.php is as follows: <?php session_start(); $_SESSION['id'] = '9'; $id = $_SESSION["id"]; $username = $_POST["username"]; $fname = $_POST["fname"]; $password = $_POST ...

phphtmlmysqlphpmyadminphpmyid

Excessive top margin on a div within a flex container is disrupting alignment

I am currently using Bootstrap 5 with flex. I am trying to align an image with some content on its right side, but when I try to align them vertically, the content on the right does not move accordingly. It seems like there might be a margin issue in the " ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Trouble getting CSS and JavaScript to function properly with HTTPS?

It seems that the css and js files are functioning properly on , but not on . As a novice in web design and javascript, I am struggling to find a solution to this issue. Trying to link the CSS file with "//isdhh.org/css/style.css" has not resolved the pr ...

javascriptcsshttps

Vertically align the text

Is there a way to center this text vertically within the divs? I've attempted adjusting the position using relative/absolute, and modifying the top and left properties of the paragraph, but none of these methods have been successful. div.roxo{ ...

htmlcssalignment

Retrieve the Vue.js JavaScript file from the designated static directory

This is my inaugural attempt at creating a web application, so I am venturing into Vue.js Javascript programming as a newcomer. I have chosen to work with the Beagle Bootstrap template. Within my Static folder, I have a file named app-charts-morris.js whi ...

javascripthtmlvue.jsdonut-chart

Creating dynamic and fluid motion with Bezier curves on canvas

I am currently working on creating a line that spans across the canvas from left to right. In these early stages of development, I am using a step-by-step animation approach with the following function: timer = window.setInterval(draw_line, 30); Here is ...

javascriptjqueryhtmlcanvas