How can I make HTML anchor tags thicker on hover without using CSS and only change the inline styles?


Ahmet Skc

I'm trying to make the following anchor tags look bolder on hover without using any external or embedded CSS files, is it possible to make them look bolder by applying inline styles?

<a href="https://en.wikipedia.org/wiki/Internet_of_Things"  target="_blank" ">Internet of things<br></a>
<a href="https://en.wikipedia.org/wiki/Machine_to_machine"  target="_blank">M2M<br></a>
<a href="https://en.wikipedia.org/wiki/Mesh_networking"  target="_blank">Mesh Network<br></a>
<a href="https://en.wikipedia.org/wiki/Telemetry"  target="_blank">Telemetry<br></a>
<a href="https://en.wikipedia.org/wiki/Wireless_sensor_network"  target="_blank">WSN</a>
Reuven Karasik

Inline CSS can't do this. You have to use normal <style>tabs or a separate sheet:

a {
    font-weight: normal;
}

a:hover {
    font-weight: bold;
}

I highly recommend trying to do it with CSS, but if you have to do it with JS, here are the solutions:

<a href="https://en.wikipedia.org/wiki/Internet_of_Things" onmouseover="this.style.fontWeight='bold'" onmouseout="this.style.fontWeight='normal'" target="_blank" ">Internet of things<br></a>

Here is a fiddle:

http://jsfiddle.net/72ehppr1/

Related


How to change CSS display properties with anchor tags?

Vivek Singh I have a page with an anchor tag: <a href="tut.html#div2">jump to div2</a>. The anchor tag will open tut.htmlwith :divid=div2 <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

How to write inline styles for html tags in React?

drug I want to style the title tag from the top level component like this: <div style={{ ['h2']: { backgroundColor: 'red' } }}> <h2>test</h2> </div> 'test' has a red background, which I can't do because in my use c

How to write inline styles for html tags in React?

drug I want to style the title tag from the top level component like this: <div style={{ ['h2']: { backgroundColor: 'red' } }}> <h2>test</h2> </div> 'test' has a red background, which I can't do because in my use c

How to change inline styles to CSS using Material-ui in React?

dhavalnc1 I'm using inline styles to override styles for Material-UI components in React. Recently, I realized that using CSS is a more organized and better way to style components. I have referenced all the documentation in the material-ui user guide. But cou

How to get anchor tags without specific CSS class using jQuery?

Ram Singh I am reading the Jquery cookbook. I've learned how to filter DOM elements with a specified class. Now I want to do the opposite, which means now I want to get elements that don't have a class specified. My HTML code is: <li> <a href="#" class="ex

CSS styles for anchor tags not working

Turbo 123 I put some links on the page, added the link to a css file to the html, but the styles are not showing. HTML: <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="te

How can I make multiple HTML tags in JQuery using a For loop?

Ian Knudsen I'm trying to create a dynamic list of options using JQuery, but when I run the code, there is only one option label out of n option labels (n is any real positive integer). Here is an example array: my code: $.getJSON('http://localhost:3006/search

How to get anchor tags without specific CSS class using jQuery?

Ram Singh I am reading the Jquery cookbook. I've learned how to filter DOM elements with a specified class. Now I want to do the opposite, which means now I want to get elements that don't have a class specified. My HTML code is: <li> <a href="#" class="ex

How to change inline styles to CSS using Material-ui in React?

dhavalnc1 I'm using inline styles to override styles for Material-UI components in React. Recently, I realized that using CSS is a more organized and better way to style components. I have referenced all the documentation in the material-ui user guide. But cou