Modify SVG appearance when hovering over a different div

Looking to update the design of my inline SVG logo when the mouse hovers over a different section on the page. Below is a simplified version of my HTML with only the necessary components included: 

<!-- logo container -->

    <div class='fullLogobg'>                 

        <!-- start inline svg -->             

            <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2000px" height="2000px" viewBox="0 0 2000 2000" enable-background="new 0 0 2000 2000" xml:space="preserve">

                <text class='bottomLogoText' transform="matrix(1 0 0 1 49 1967)" fill="#9933FF" font-family="'TrajanPro3-Bold'" font-size="197">

                    Dummy Text

                </text>

            </svg>

        <!-- end inline svg -->                         

    </div> 

<!-- end logo container -->    

<!-- begin part of my navigation -->    

    <div class='leftColumn'>

        <a href="#">

            <div class='topLeft'>

                <span class='linkText'>

                    Link text

                </span>

            </div>

        </a>

        <a href="#">

            <div class='bottomLeft'>

                <span class='linkText'>

                    Link text

                </span>

            </div>

        </a>

    </div>

<!-- end navigation -->

Focusing on the text in the SVG along with the division using the topLeft class, here's the relevant CSS for reference:

.fullLogobg
{
    position:absolute;
    top:25%;
    left:25%;
    width:50%;
    height:50%;
    z-index:1;
    background-color: transparent;

}

.fullLogobg svg
{
    display:block;
    margin:0 auto;
    width:auto;
    height:100%;
    width:100%;
    z-index:1;
    background-color: transparent;

}

.leftColumn
{
    Width:50%;
    height:100%;
    background-color:transparent;
    overflow:auto;
    float:left;
    position:relative;
}

.topLeft
{
    margin:0%;
    width:96%;
    height:46%;
    background-color:transparent;
    display:block;
    border:3px #9933FF solid;
    position:absolute;
    top:0px;
    left:0px;
}

.topLeft:hover
{
    color:green;
    border:3px green solid;
}

.linkText
{

    text-align:center;
    display:block;
    width:100%;
    height:20px;
    font-size:20px;
    font-weight:700;
    color:inherit;
    position:absolute;
    top:50%;
    margin-top:-10px;
    background-color:transparent;

}

The goal is to change the style of the SVG text when the topLeft division is hovered over. Attempting various selectors like:

.topLeft:hover > .fullLogobg .bottomLogoText
{
    fill:green;
}

or

.topLeft:hover ~ div svg .bottomLogoText
{
    fill:green;
}

and other combinations have not been successful. Seeking suggestions on how to achieve this effect using CSS or JavaScript if necessary. Any insights would be greatly appreciated. Thank you!

htmlcsssvghoverstyling

Answer №1

To modify the appearance of a specific element, assign it an ID and implement an "onmouseover()" method to alter its visual properties. Here's an example:

const targetElement = document.getElementById("YOUR_ID");
targetElement.setAttribute("style", "color:#A34F20;");

Answer №2

To achieve this effect, CSS alone is not sufficient. However, implementing it with a bit of Javascript can be quite straightforward.

Consider the following jQuery code snippet as an example:

$(".topLeft").mouseover(function() {
    $("#Layer_2 text").get(0).style.fill = "green";
}).mouseout(function() {
    $("#Layer_2 text").get(0).style.fill = "#93f";
});

For a live demonstration, check out this Demo.

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

What is the best way to insert a space between the radio buttons in a RadioButtonList and the accompanying text?

After researching various solutions, none have seemed to work for me. In my ASPX page, I am utilizing Bootstrap to showcase a RadioButtonList with options for "Yes" and "No" like this: <div class="form-group my-3"> <label class=" ...

htmlasp.netbootstrap-4

Can SCSS be used to switch themes on a website?

I am looking to implement a dynamic theme change feature when the user clicks on a specific button. When users click on a checkbox (checkbox is checked) The following commented theme should be applied: /** $theme1-background:white; $theme1-font-col ...

htmlcsssass

What is the best way to invoke a TypeScript function within an HTML document?

Can anyone guide me on how to import a TypeScript function into an HTML file and then call it? I'm a bit confused about the process. Below is my attempt in index.html to call the function getJSON() <!DOCTYPE html> <html lang="en"> < ...

htmltypescript

After applying a CSS reset, the styles on two elements appear different in Internet Explorer only due to inconsistencies

Even after implementing a CSS reset, it seems that Internet Explorer is applying default styling to the SUP tag. In this scenario, the SUP tag remains slightly smaller than the styled SPAN tag. Is there a workaround for this issue? <!doctype html> ...

htmlcssinternet-explorer

Creating a hover effect instead of a click event in a Bootstrap 4 dropdown menu

Looking to create a hover effect instead of a click in the bootstrap dropdown menu? Past answers lack jQuery code that can simply be copied and pasted into your script for optimal results. Additionally, previous solutions were written for older versions o ...

javascriptjqueryhtmlcsstwitter-bootstrap

Transforming the style of a particular element within React using Array().fill().map's method

Looking for a way to dynamically change the color of an array in React + styled jsx? Let's say you want to change the color when the number of elements in the array is a multiple of 4 (e.g. the index is 4, 8, etc.) Is there a clever solution to achi ...

cssreactjs

What could be causing my centrally-aligned divs to not scroll horizontally?

(Please note that there are no scrollbars on these divs, so scrolling to the left is not possible within the body or the divs themselves.) The issue (shown above in FF and Opera) occurs on both the "Baroque" and "Spotlights" theme selections (refer to the ...

csshtml

In Redux, it is possible to add characters to an array but for some reason the remove action does not successfully reach the reducer

As a user types or erases characters, I am utilizing redux to update an array of characters. This allows me to set a success flag when the user correctly types the entire phrase. Currently, when typing in characters, the SET_INPUT action in redux fires of ...

javascripthtmlreactjsredux

Is it possible to utilize a DIV or SPAN value for JQuery plugin options?

I have integrated a Twitter plugin into my website with the following settings: jQuery(function($){ $(".tweet").tweet({ username: "username", count: 3, template: "{avatar}{text}{time}", loading_text: "loading tweets..." ...

jquerytwitterhtml

What is the reason behind a stationary lightbox sticking to the top of the webpage rather than the top of the viewport?

When you visit this page and scroll down a little before clicking on one of the art pieces, have you noticed that the "fixed" lightbox seems to be attaching itself to the top of the page instead of the viewport? I'm looking for ways to make it attach ...

htmlcss

Do browsers load from top to bottom or bottom to top?

I once heard conflicting information about whether a browser loads from top to bottom or from bottom to top. Another question was raised about whether a CSS file reads from the bottom to the top. I found myself wondering when someone asked me this ques ...

htmlcssbrowser

What is the best way to create the illusion of a swinging rope in an image?

How can I create a vertical image that appears to 'swing' back and forth on my website? I am looking to incorporate an image of a rope swinging subtly in the background as a theme for my site's animation. Is there a way to achieve this effe ...

javascriptjquerycss

Is there a way to load HTML files without requiring me to save them in a static folder?

While my index page loads fine on the browser, when I click on the home page or any other link like contact, it gives a 404 error and tries to access static/index.html. Why is it looking for index.html in the static files and how can I fix this issue? I i ...

pythonhtmldjangoweb

Manipulating HTML using Python

Can anyone provide assistance to a beginner in Python who is struggling with the following code? def getLinkinfo(endpoint): response = urllib.request.urlopen(endpoint) link_info = response.read().decode() return link_info text=getLinkinfo(&apo ...

pythonhtmlweb-scrapingbeautifulsoup

Conflicting CSS selection elements in WordPress causing theme theme selection conflicts

Despite trying various edits to my custom CSS, such as including ::selection{color: white; background: #2f3f58;}, copying and pasting code from sites like W3Schools and stack overflow, nothing seemes to work. I am using the Hueman theme from , which has a ...

htmlcsswordpresswordpress-themingselection

Showcasing a JSON attribute in the title using AngularJS

I'm struggling to display the Title of a table. Here is where I click to open a "modal" with the details: <td><a href="#" ng-click="show_project(z.project_id)">{{z.project}}</a></td> This is the modal that opens up with det ...

javascripthtmlangularjsjson

The v-bind:style directive in Vue.js is functioning properly for setting the margin-right property, however

Having an issue with applying a specific style to one of my div elements. When using the following code: :style="(index + 1) % 2 == (0) && type.Liste.length === indexVin + 1 ? `margin-left : calc((100% - (100% / ${type.Liste.length})) + 6rem); ...

javascripthtmlcssvue.js

Is there a way to narrow down the font choices using HTMLPurifier?

- Currently in my project, I have incorporated an HTML-WYSIWYG Editor that allows users to utilize various Webfonts for styling their texts. The editor I am utilizing can be found at NiceEdit. It generates code snippets such as: <font face="c ...

phphtmlfontswysiwyghtmlpurifier

Alter the size of an element's width dynamically while maintaining a predetermined width

Having a fixed width div: // CSS @media only screen .column.small-centered:last-child, .columns.small-centered:last-child { float: none; } .lesson_lt_mc_div .small-centered { margin-top: 15px; margin-bottom: 15px; width: 296px; } foundation.css:1 ...

javascriptjqueryhtmlcss

Properly formatting a JavaScript function within another function

Using the function pagination($total, $limit, $page) will display page numbers [pg#01 pg#02 pg#03 pg#04 NEXT]. When a user clicks on a specific page number (such as pg#02), javascript:showPagination('what_here') is designed to trigger an AJAX re ...

phpjavascriptmysqlhtmlajax