What is the best way to display a border around text in an HTML element when the mouse hovers over it?

I am currently developing a Browser Helper Object (BHO) for Internet Explorer that involves searching for specific words on a web page and encasing those words in an HTML tag for styling purposes.

While I have code in place that allows me to change the style properties when hovering over the tag, my goal now is to display a "box" around the word without moving the text from its original position.

To better illustrate my point, I have created an image showing the desired effect (imagine the word "Overflow!" within its own HTML tag):

The first picture depicts the initial state, while the second shows what happens when the mouse hovers over the word!

If anyone has any suggestions on how to solve this particular challenge - whether through Javascript or CSS styling - I would greatly appreciate it.

javascripthtmlcssinternet-explorermouseover

Answer №1

To add a tag for highlighting text, incorporate the span element in your code and specify the onmouseover and onmouseout events to adjust the CSS class:

<span onmouseover="this.className='myMouseOverClass'" onmouseout="this.className=''">Highlight Text!</span>

Next, update your CSS with something similar to this:

.myMouseOverClass
{
  border-style:dashed;
  border-width:1px;
  border-color:green;
}

Answer №2

Unlike the border, the outline property is applied on top of other content instead of being included within the box model.

Answer №3

My experience with IE7 was quite satisfactory

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <span class="boxclass">tempor</span> incididunt

and

.boxclass:hover {
border: 3px solid #000000;
margin: -3px;
}

However, things took a turn when I tried to resize the browser....

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

Click events are not functioning properly after an AJAX request is made

$(document).ready(function () { var user = 1; $("a.like").on("click", function () { var article = $(this).attr('data-article'); $.ajax({ type: "POST", url: "WebService.asmx/Like", ...

javascriptjqueryhtmlcssbootswatch

Tips for customizing CSS hover effects using HTML and jQuery scripts

Just a heads up before I ask my question - the code I'm about to share is sourced from this video on YouTube, so all credit goes to the creator. JS $(".product-colors span").click(function(){ $(".product-colors span"). ...

htmljquerycss

Mouse over the background of an image in jQuery to create a fade-in effect, without affecting any content inside

Currently facing a challenge with jquery. Please take a look at jsfiddle.net/7HXEF/1/. I am trying to create a DIV with a background image that fades in and out when the mouse hovers over it. However, the inner div with a link should not be affected by the ...

jqueryhtmlbackgroundfadeinfadeout

Trouble Displaying DHtmlX Scheduler Events on Safari and Internet Explorer

I have recently embarked on the journey of building a nodejs application and decided to incorporate DHtmlX Scheduler as my calendar. To my dismay, I encountered an issue where the events are not displaying on Safari or IE, despite working perfectly fine on ...

javascriptnode.jsexpresscross-browserdhtmlx

Receiving an abundance of alert notifications triggered by the search functionality of jsTree

I've created a function to search for text within the jsTree framework. The goal is to highlight the node if the search text is found. If not, inform the user with a message saying "No node matching the search string, please try again." However, I&a ...

javascriptjstree

Firefox not responding to input select dropdown selection

When creating a jQuery submenu box in Firefox, I encountered an issue with the input select dropdown. While it functions properly in Google Chrome, the select box behaves erratically in Firefox. When attempting to choose an option from the select box, such ...

javascriptjqueryhtmlcssfirefox

Guide to automatically blur the input field and toggle it upon clicking the checkbox using Angular

<input (click)="check()" class="checkbox" type="checkbox"> <input [(ngModel)]="second_month" value="2019-09" type="month" [class.blurred]="isBlurred">> I need the second input(type=month) field to be initially blurred, and only unblur ...

htmlangulartypescriptblur

Utilizing CSS position sticky in Bootstrap 4 to maintain visibility of a sidebar

I currently have a layout with two columns structured like this: <div class="row"> <div class="col-xs-8 content"> </div> <div class="col-xs-4"> </div> </div> By applying the position:sticky to the si ...

csstwitter-bootstrapcss-positionbootstrap-4twitter-bootstrap-4

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

cssvue.jsnpm

Getting the selected value from a dropdown menu in ReactJS

I am working on creating a form that resembles the following structure: var BasicTaskForm = React.createClass({ getInitialState: function() { return { taskName: '', description: '', emp ...

javascriptreactjs

Is there a way to condense my child table directly below its parent column?

When attempting to collapse the "child tr" within the "tr" in my code, the collapse is not positioning correctly underneath its parent tr. While it works fine in a JSFiddle, the issue arises when using my editor and live preview. In this scenario, both "ch ...

javascriptjqueryhtmlbootstrap-4bootstrap-table

List-style-type outside of a table's boundaries

I recently experimented with using <ol> as list elements within a table in order to dynamically insert new table rows. <table> <thead> <tr> <th>head</th> <th>head</th> <th>h ...

javascriptjqueryhtml

The sidebar appears to be hovering above the footer section

I am currently working on creating a sidebar that sometimes ends up being longer than the main content section. You can check out my demo here: http://jsfiddle.net/y9hp4evy/1/ and another case here: http://jsfiddle.net/y9hp4evy/2/ (If I add a height to th ...

htmlcss

Innovative concepts for designing web applications

Here's a unique situation that requires some brainstorming. I'm looking for any advice or suggestions. Imagine a tennis court equipped with sensors throughout - the net, lines, everything has sensors built in. These sensors are constantly sending ...

javascriptajaxweb-servicesweb-applicationswcf-client

Ways to address issues in my tree-building algorithm when the parent ID is missing

Currently, I'm in the process of creating a function to build a tree. Everything seems to be functioning correctly until I encounter a scenario where a document is added with a parentID that doesn't exist in the list. The root node is intended to ...

javascriptjson

Minimize the frequency of using map and filter together when operating on arrays of objects

When given an array of objects as input, the task is to identify and subtract the `transactionAmount` field value of an item that shares the same `transactionReference` (as the current item in a loop) and has a `transactionType` of 13. The final result sho ...

javascriptarrays

Transferring information to a controller using ajax in ASP.NET Core

I am encountering an issue with sending data to the controller through ajax. The value goes as "null". Can someone please assist me with this? Here are my HTML codes: <div class="modal fade" id="sagTikMenuKategoriGuncelleModal" data ...

javascriptc#jqueryajaxasp.net-core

Interact with a webpage element using Selenium

My goal is to extract information from the following page: I want to interact with each blue stats icon on the page (one for every match of the tournament). Below is the code I am using: from selenium import webdriver from selenium.webdriver.common.by im ...

javascriptpythonselenium

Is there a way to create a scrollable material-ui data-grid Toolbar and table columns header?

I am looking to synchronize the horizontal scrolling of my Toolbar items with the horizontal scrolling of my datagrid table items. Currently, they are scrollable independently. I would like it so that if I scroll the toolbar items, the datagrid items also ...

javascriptreactjsmaterial-ui

The date-fns parse function will retrieve the value from the previous day

When attempting to parse a date using the date-fns library, I am encountering an issue where the resulting date is one day prior. How can this be resolved in order to obtain the correct result? start = '2021-08-16' const parseStart = parse(start, ...

javascriptnode.jsreactjsexpressdate-fns