Background Color of Tspan Element

Background color of tspan element

A rect is probably the best way to do that (assuming you are only dealing with the simplest forms of text).

The tspans have no "background" themselves in SVG 1.1, the background is whatever gets painted before the tspan. There are many cases to consider, such as the case where a tspan is inside a textPath that has the shape of a circle. Also note that it's not as simple as a continous rectangle in all cases, a single tspan can be skewed, rotated and partitioned into several intersecting and non-intersecting shapes due to transforms, glyph positioning, etc.

There's another way I can think of that would do this without scripting, but then you'd need to know the width of the string in advance (e.g by using a monospaced font). If you have that then you can add another tspan element using the Ahem font, placing it before the other tspan in the document and giving it the same x,y position as the tspan you want to give a "background".

Otherwise the way to do this is through scripting, and adding rectangles (or tspans with an Ahem-like font).

Background color for two spans, need to fill the space in between as with the same color

If you just the following way of writing your code, then you can solve the issue:

body {  background-color: #fefbd8;}
h1 {  background-color: #80ced6;}
div {  background-color: #d5f4e6;}
span {  background-color: #f18973;}

<h1>Background Color</h1>
<div>Set a background color for a div element.</div>
<p>Set a <span>background </span><span>color</span> for only a part of a text.</p>

Change the background color of a span element when it is clicked

have you tried to use :active?

span:active

Change text color of a span with Javascript while hovering on seperated div

Your code is a bit messy but you are calling your class incorrectly:

This:

document.getElementsByClassName (".aux-menu-label")

Should be this:

document.getElementsByClassName ("aux-menu-label")

Additionally, when using getElementsByClassName you are provided with an array-like object with all elements that have the class you have specified.

With that in mind, you must run a loop to target elements with the styles you want to apply.

The below code is how we will target multiple labels and change them to yellow on hover:

  var labels = document.getElementsByClassName("aux-menu-label");
  for (var i = 0; i < labels.length; i++) {
    labels[i].style.color = "yellow"
  }

When you run the snippet below you will see I have used similar code to revert the color back to blue onmouseout.

Learn more about getElementsByClassName here.

//Including this to show you how to target CSS child elements as described in your comment
var childElement = document.querySelector('#menu-item-136 .aux-item-content'); 
childElement.style.backgroundColor = "white";
console.log(childElement);

//Showing mega menu on hover over menu point

document.getElementById("menu-item-136").addEventListener("mouseover", mouseOver);
document.getElementById("menu-item-136").addEventListener("mouseout", mouseOut);

function mouseOver() {
  document.getElementById("mega-menu").style.display = "block";
}

function mouseOut() {
  document.getElementById("mega-menu").style.display = "none";
}



//Let mega menu stay visible when hovering over it
//Style menupoint when hovering over mega menu div (NOT WORKING)!

document.getElementById("mega-menu").addEventListener("mouseover", mouseOver);
document.getElementById("mega-menu").addEventListener("mouseout", mouseOut);

function mouseOver() {
  document.getElementById("mega-menu").style.display = "block";
  var labels = document.getElementsByClassName("aux-menu-label");
  for (var i = 0; i < labels.length; i++) {
    labels[0].style.color = "yellow"
  }
}

function mouseOut() {
  document.getElementById("mega-menu").style.display = "none";
  var labels = document.getElementsByClassName("aux-menu-label");
  for (var i = 0; i < labels.length; i++) {
    labels[i].style.color = "blue"
  }
}

.menu-item-136 {
  background-color: grey;
  height: 50px;
}

.menu-item-136:hover {
  background-color: green;
}

.aux-menu-label {
  color: blue;
}

.mega-menu-1 {
  display: none;
  background-color: green;
  height: 200px;
}

<div>
  <li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
    <a href="#" class="aux-item-content">
      <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>  Leistungen</span>
      <span class="aux-submenu-indicator"></span></a>
</div>



<div id="mega-menu" class="mega-menu-1">content</div>

<div>
  <li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
    <a href="#" class="aux-item-content">
      <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>  Leistungen</span>
      <span class="aux-submenu-indicator"></span></a>
</div>



<div id="mega-menu" class="mega-menu-1">content</div>

Edit the height of the background-color of span / inline text

You can use a vertical linear-gradient with transparent top and bottom color (I've used red in the example).

The height of the element is 2em because of the line-height, so 1.8em is 90%. Create a gradient with two transparent strips (red in the demo) of height 5% each. The rest of the 90% will be the highlight color.

.highlight {  font-family: 'Roboto', sans-serif;  font-weight: 300;  font-size: 1.5em;  background: linear-gradient(to bottom, red 5%, #4db6ac 5%, #4db6ac 95%, red 95%);  line-height: 2em;}

<span class="highlight">Some highlighted text</span>

Changing the background color of the span and ul when the element is brought into focus?

Make the element focusable:

<dl tabindex="-1" class="select"><!-- if you want it to have
    a real tab index you can set it to another number -->
    <dt><span id="vegetables"></span></dt>
    <dd>
        <ul>
            <li><a data-val="" href="#"> </a></li>
            <li><a href="#">Carrots</a></li>
            <li><a href="#">Celery</a></li>
            <li><a href="#">Brocoli</a></li>
        </ul>
    </dd>
</dl>

Then, in your CSS using :focus

.select:focus {
    outline: 0; /* if that matters */
    background-color: yellow;
}

Background Color of Tspan Element