Looking at the following html:
Let's see if we can
<highlight data-id="10" data-comment="1">
focus on this part only
</highlight> and ignore the rest
My goal is to emphasize only the highlight section. I know how to emphasize a span class by myself, but I'm a bit unsure about this. I'm utilizing javascript in combination with a css structure
If you have any guidance, I'd be grateful. Much obliged!
You can achieve the desired effect without using Javascript by simply utilizing CSS :hover
cpos:hover{
background:yellow;
}This is a test to<cpos data-idcpos="10" data-comment="1"> highlight only this portion of text </cpos> and not thisUpdate
If you have multiple
cpostags with different ids and wish to highlight an individual one on hover
You can target each individual id using #
#MyId:hover{
background:yellow;
}This is a test to<cpos data-idcpos="10" data-comment="1"> highlight only this portion of text </cpos> and not this
This is a test to<cpos id="MyId" data-idcpos="10" data-comment="1"> highlight only this portion of text </cpos> and not thisAdditionally, would you like to see how to accomplish this using Javascript?
You can utilize the onmouseover and onmouseout events
This is a test to<cpos data-idcpos="10" data-comment="1" onmouseover="this.style.background='yellow'" onmouseout="this.style.background=''"> highlight only this portion of text </cpos> and not thisIs there a way to achieve similar functionality to the Javascript example without modifying the cpos tag attributes?
Yes, you can iterate through them and attach event listeners programmatically
var elements = document.getElementsByTagName('cpos');
for(var i = 0; i < elements.length; i++){
elements[i].onmouseover = function(){
this.style.background = 'yellow';
}
elements[i].onmouseout = function(){
this.style.background = '';
}
}This is a test to
<cpos data-idcpos="10" data-comment="1">
highlight only this portion of text
</cpos>and not this This is a test to
<cpos data-idcpos="10" data-comment="1">
highlight only this portion of text
</cpos>and not this This is a test to
<cpos data-idcpos="10" data-comment="1">
highlight only this portion of text
</cpos>and not thisTo add stylish effects to specific parts of your text, you can employ CSS by defining a unique class.
CSS:
.selected:hover{ //Apply HOVER effect
background-color:yellow;
}
HTML:
This example demonstrates how to<cpos class="selected" data-idcpos="10" data-comment="1"> highlight only a specific section of text </cpos> while leaving the rest unaffected
:hoverIn order to achieve the desired effect, you need to assign a class to the cpos element. Alternatively, you can also use SPAN elements, which look like this is big.. the end
When incorporating the class into your code, make sure to do it like this:
This is a test to<cpos class="highlight" data-idcpos="10" data-comment="1"> highlight only this portion of text </cpos> and not this
In your CSS:
.highlight:hover{
background-color: yellow;
}
Check out this cool highlighting example with animation I created using CSS - no JavaScript required!
Your CSS:
html, body {
height: 100%;
}
body {
background: #2c3e50;
display: flex;
}
.card {
width: 350px;
padding: 30px;
background: #1abc9c;
margin: auto;
transition: .3s ease;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.card:hover {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
transform: translateY(-10px) scale(1.02);
}
.card:hover .entry-title {
background-position: -100% 0;
}
.entry-title {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #16a085 50%);
background-size: 200%;
background-position: 0 0;
display: inline;
transition: .5s ease-in-out;
font-family: raleway, arial, sans-serif;
text-transform: uppercase;
}
.entry-title cpos {
color: white;
text-decoration: none;
}<div class="card">
<h1 class="entry-title">
<cpos><a>This text will be highlighted when hovered</a></cpos>
</h1>
</div>You can view the demonstration on JSfiddle here: http://jsfiddle.net/ebramatef/Lfd98v9m/
Currently, I am in the process of developing a web application using AngularJS and Rails. One of the features involves creating bookings through a bookings function. In the dashboard section of the app, I aim to have two tabs - one for Current Bookings and ...
After creating a JSON object and storing it in MySQL, I encountered an issue when trying to retrieve and parse it. When I stringify the JSON object, the properties are being enclosed in double quotes causing issues when parsing the retrieved string. Below ...
I am developing a notifications trigger method that needs to run three times per day at specific times. Although I have reviewed the documentation, I am struggling to understand the regex code and how to customize it according to my requirements! Current ...
Struggling to make this work correctly, I aim to introduce tick marks and custom labels into jQuery Mobile's slider widget. My goal is to add tick markers at 0, 25, 50, 75, and 100 with a unique string above each tick. Additionally, I want these label ...
When I directly call the Spring Boot API in the browser, it successfully creates and downloads a PDF report. However, when I try to make the same GET request from Angular 6, I encounter the following error: Here is the code snippet for the Spring Boot (Ja ...
I am facing an issue with my code where the background image of the site transitions between 5 different images, but every time an animation completes and the next one starts, there's a white flash. I'm not sure how to resolve it or what I might ...
While attempting to edit a CSS file in Sublime Text 2, I noticed that all the code is displayed without any line breaks. This makes it difficult to read and work with. Is there a way to fix this issue and format the code into readable sections? ...
I've been working on developing a web app with a focus on mobile-first design. When I scale down my Chrome window, everything looks responsive and functions well, adjusting objects to fit the smaller screen size. However, I noticed that when I switch ...
After including angular.min.js and angular-route.min.js I encountered an issue where clicking the login button would change the URL to '/home', but the home.html page wouldn't load. I attempted adding a controller under templateUrl, but it ...
Currently, I am developing a Chat app using Flutter and attempting to send notifications to specific devices through Firebase functions. Initially, I retrieve the device token and store it in Firebase. Now, my challenge lies in fetching the token and invok ...
I'm delving into the world of node js and currently immersing myself in the concepts of promises and async/await. Here's a code snippet I've been experimenting with, but I can't quite figure out how to ensure that the code waits until t ...
My objective is to extract the values from the IDs #username-l and #pwd-l in an HTML form upon the user clicking the submit button. I aim to compare these values with those stored in a SQL database, and if they match exactly, redirect the user to a specifi ...
I needed to adjust the font size of specific text within an option tag in my code snippet below. <select> <?php foreach($dataholder as $key=>$value): ?> <option value='<?php echo $value; ?>' ><?php echo ...
My Raspberry Pi hosts a local website that does not require an internet connection. I want the webpage to display text from a large file line by line as users access it. For example, if the text file contains: Hello How are You doing Today? The brow ...
Below is the code for the client side: import {useEffect,useState} from 'react'; import io from 'socket.io-client'; import Peer from './Peer'; export default function TestMeeting(){ let peerName; const [peerList,setPee ...
I'm currently working on a website project that involves implementing a fixed navbar with jQuery sliding animation for the menu. However, I've encountered an issue where the "menu_icon" is getting pushed to the left every time the menu slides dow ...
After setting up my Firebase and initializing it, I managed to retrieve data from it. However, I encountered an issue when trying to use express.get() and json the data into the server. I'm unsure of what the problem could be. let initializeApp = requ ...
What is the most effective method for editing content while using ng-repeat? In an ideal scenario, the added birthday would be displayed as a hyperlink. When clicked, it would reveal an edit form similar to the add form, along with an update button. Chec ...
I am currently facing a challenge in sending data from the front-end (react js) to the back-end (node js), and then to a mongodb database for storage. While I have successfully called the server with the data, I am encountering an issue when attempting to ...
It is possible to run javascript from a file. Run JavaScript ${CURDIR}/js_to_run.js However, I am wondering how to call a function by its name from this file? ...