Develop Reference

Highlight element of another page by clicking a link

I have two HTML document, home.html and courses.html
home.html has 4 links each representing(linked) to a part of code(div) on courses.html
What I want: When a link is clicked on home.html and it is redirected to a specific part of courses.html then that part should glow (maybe by box-shadow) to attract reader's attention.
home.html(rough view)
courses.html(roughly showing effect I want)
PS: I'm just a beginner and I know only HTML, CSS, Javascript so if this effect is possible using these languages then it will be really great. If not, then pls make me understand that code.
Thanks

You can use the :target pseudo class on the intended sections in the 2nd page. Note that the anchor name (the hash after the #) is identical the target element id.
The example works on a single page, but the principle will work on 2 or more pages as well.
div:target {
border: 2px solid pink;
}
<!-- source page -->
Go to 1
Go to 2
Go to 3
Go to 4
<!-- target page -->
<div id="section1">Example 1</div>
<div id="section2">Example 2</div>
<div id="section3">Example 3</div>
<div id="section4">Example 4</div>

Well, you can use the location.hash.
When redirecting the user to the courses.html page, redirect to an URL with a hash parameter in the URL. for example: /courses.html#link1.
Then, ON the courses.html page, add this script:
$("#"+location.hash).css('box-shadow', '0 5px 5px #08c1c6');
I'm using jQuery for better readability. What it does is simple: Adds box-shadow to the element which has the ID of the URL hash parameter.
You should add an ID attribute to the divs you want to mark, and then the script will add box-shadow according to the # parameter in your URL.
Javascript version for the code:
document.getElementById(location.hash).style.boxShadow = "0 5px 5px #08c1c6";

Make the link like
home.html
Go to something
*say you want to highlight an element whose id=something
On courses.html page run a function on document ready to check for any highlights.
JQUERY:
$( document ).ready(function() {
CheckForHighlight();
});
function CheckForHighlight(){
href = window.location.href;
values = href.split('?')[1] // Remove the url
highlight = values.split('=')[1]; // Grab the second parmeter
$('#'+highlight).addClass('highlightedElem');
//highlightedElemclass has box shadow or border
}
CSS:
.highlightedElem{
box-shadow:0px 0px 10px blue;
border:1px solid blue;
}

If I understood correctly, css box shadow for a:hover is enough on this
This is css part
a:hover {
text-decoration: none;
box-shadow: 2px 2px 2px 2px red;
}
This is the html part
for a link 1
a:hover {
text-decoration: none;
box-shadow: 2px 2px 2px 2px red;
}
for a link 1
for a link 2
for a link 3
for a link 4

How to make a css class work for only one object at a time?

I want a css class to work for only one object at a time. I want to activate it only when I hover over an object with that class. When my cursor leaves that object the class should still be activated. But when I hover over a second object with that class it should simultaneously start working for that object and stop working for the previous object.
The css I am trying to implement this way is for a set of thumbnail images and is as follows
{
box-shadow: 0 0 5px red;
}
None of the images should have this css activated by default when the page loads. How do I do it? Open to any kind of solution here css/javascript/jquery/plugin/anything elce. Can anyone help?

Use :hover:
The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
REF: https://developer.mozilla.org/en/docs/Web/CSS/:hover
div:hover {
box-shadow: 0 0 5px red;
}
<div>11111</div>
<div>22222</div>
<div>33333</div>
Solution 2: use mouseover event (or hover as #abeyaz's answer), remove all active then add the active class to the current one.
The hover() function is more high level - it's built to call functions to handle both a mouseenter event and a mouseleave event. It's very convenient for a UI element that has a hover and normal state (e.g. a button.)
The mouseover() function specifically binds to the mouseover event. It's best for situations where you only care when the mouse has crossed the border into an element and you don't really care what happens if it leaves. It's also the function to call when you want to trigger the event on some element.
jQuery provides hover() as a convient way to handle common UI hovering states.
mouseover() is more for manually accessing the specific browser event.
REF: https://www.quora.com/jQuery/jQuery-What-is-the-difference-between-the-hover-and-mouseover-functions
$('div').on('mouseover', function(){
$('div').removeClass('active');
$(this).addClass('active');
})
.active {
box-shadow: 0 0 5px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>11111</div>
<div>22222</div>
<div>33333</div>

You can do it easily using jquery as in this fiddle https://jsfiddle.net/4f1g1yxf/. You can do it easily using jquery as in fiddle below. The idea is simple; remove the class from activated one first, then add to the new one.
$(".box").hover(function(){
$(".box.activated").removeClass("activated");
$(this).addClass("activated");
});
.activated {
box-shadow: 0 0 5px red;
}
.box {
display: inline-block;
margin-right: 30px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>

Try the next approach:
CSS:
.abc {
box-shadow: 0 0 5px red;
}
HTML:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
JS:
jQuery('*')
.bind('mouseover', function (event) {
var o = jQuery(this);
if (!o.find('.abc').length) {
o.addClass('abc');
}
})
.bind('mouseout', function () {
jQuery(this).removeClass('abc');
});
P.S. Instead of '*' put the proper class or element identifier to limit event scope.

Override CSS class using JS

I am using Reveal JS. This is the CSS that I want to override:
.reveal section img {...
Using one of the methods below (or something better), how can I use JS to override that?
document.getElementById(image1).classList.add("red"); // I tried creating a CSS class called "red" but it doesn't overide the original
document.getElementById(image1).style.boxShadow = "red"; // this doesn't overide the original theme CSS

First, use chrome dev tools to make sure that the class is actually being added to the element.
If it is being added but the styles are not being applied, your problems may be stemming from css specificity rules.
Instead of defining your class like this:
.red {
box-shadow: 5px 2px 2px red;
}
Try this:
.reveal section img.red {
box-shadow: 5px 2px 2px red;
}

How to turn off visjs active shadow box?

I have a visjs graph in my web page (using Chrome v49). Whenever I click on or hover over the graph a blue shadow box appears around it. After looking at vis.css I assume this is controlled by this selector:
.vis-active {
box-shadow: 0 0 10px #86d5f8;
}
The only configuration option I found in the vis documentation was clickToUse but that does not cause the shadow box to disappear, regardless of value.
I have also tried specifying .vis-active in my own css, even using the browser's debug to set it as the element styles with no luck.
Lastly, in the browser debugger, going through all of the vis elements shows nothing to indicate that .vis-active is being applied, or any other stylings that would result in that shadowing.
How can I prevent visjs from showing this shadowing?

It's possible that what you're seeing is Chrome's default "focus ring," which can be overridden by:
.vis-active:focus {
outline: none;
}

Option 1:
The simplest way is to unset the box-shadow property in vis.css (do it in the vis.css, if you don't have the vis-active line in the vis.css file, then create the following in that). Unset like this:
.vis-active {
box-shadow: unset;
}
Option 2:
Or you can set the shadow blur and spread to 0, like this (in your example):
.vis-active {
box-shadow: 0 0 0px #86d5f8; /* in this case, color doesn't matter, you can even omit it */
}
Or, set it to something else you want, e.g.:
.vis-active {
outline: none;
border-color: #af90c8;
border-width: 1px;
box-shadow: 0px 0px 20px 5px #af90c8;
}
Good luck!

jQuery hover event toggle class not triggering

I have been debugging this issue for a good while now and I am so confused to why this isn't working.
As you can see I am running the following code on JSFiddle and it seems to work without any issues at all:
$(".assistance-submit-btn").hover(function() {
$(this).children('i').toggleClass("assistance-submit-btn-mouseover");
});
.assistance-submit-btn {
font-size: 1.4rem;
font-weight:300;
padding: 10px 20px;
background: none;
border: 2px solid #333;
border-radius: 10rem;
color: #333;
margin: 25px auto 0;
display: block;
}
.assistance-submit-btn-mouseover {
transform:translate(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="assistance-submit-btn" value="Submit">Submit <i class="fa fa-caret-right"></i></button>
As you can see when the assistance-submit-btn element is hovered it will add a class to the i element.
This code is a direct copy from my local website that I am developing however for some reason on my local system it will not execute when the assistance-submit-btn element is hovered.
So far I have tried adding a CSS hover to the element itself just to see whether or not the element was behind another element and unable to hover.
The only difference that I can think of on my local setup is that the assistance-submit-btn element is pulled in by AJAX. Could this effect the jQuery hover event? Any suggestions to why this might be happening would be much appreciated.
Thanks
UPDATE: Forgot to mention I am getting no errors within my console.

Yes, it's because of Ajax dynamic content. Use this code:
$(document).on({
mouseenter: function () {
$(this).children('i').addClass("assistance-submit-btn-mouseover");
},
mouseleave: function () {
$(this).children('i').removeClass("assistance-submit-btn-mouseover");
}
});