Best way to create link inside td with onMouseOver function?

Best way to create link inside td with onMouseOver function? - javascript

I have a table which includes a td with an onMouseOver function that changes the background color of the td. The text inside the td is a link. The problem I am having is that the link appears "highlighted" when the mouse hovers over the td, but can't be clicked on unless the mouse is hovering over the link itself. In other words, there is kind of a "buffer" zone around the link text but inside the boundaries of the td where the background color is changed but the cursor remains the standard pointer (and the link cannot be clicked). Is there a way to cause the entire td to be a link, or would I have to use two different images to get the desired effect?
Example code:
<table>
<tr>
<td onMouseOver="bgColChange();" style="background-color:#ffffff;">
Location 1
</td>
</tr>
</table>

You can do something like this:
<table>
<tr>
<td class="myTD0" onMouseOver="bgColChange();" style="background-color:red;cursor:pointer;" onClick="document.getElementById('myLink0').click();">
Location 1
</td>
</tr>
</table>
See I have added onClick on td with id of anchor tag
onclick="document.getElementById('myLink0').click();"
Demo Fiddle
I guess this is what you are looking for.

From what I understand, you want a TD element with a link inside of it and you want to:
change BG color when hovered
make entire TD element clickable for the link
The first thing to note is you're using inline JavaScript. That means you're placing raw JavaScript code inside your HTML. That is not a good practice or convention to follow. In the last several years the JavaScript community has stepped away from inline JavaScript.
Instead, the better approach is called "unobtrusive JavaScript" which is a fancy name that means you give your HTML elements class/ID names that you can reference in your JavaScript and CSS files.
This Wikipedia Article on Unobtrusive JavaScript is pretty good at showing what the differences are. The takeaway is that unobtrusive JavaScript is the preferred practice and should be used as much as possible.
I know there are unique situations where inline JS is still necessary, but you're particular problem doesn't need any JavaScript. You simply need to use some specific CSS. Often times the best solution is the simplest.
# HTMl file
# ----------------------------------------
<table class="custom">
<tr>
<td>
Location 1
</td>
</tr>
</table>
# CSS file
# # ----------------------------------------
.custom {
width: 100%;
}
/* Give TD element padding so you can see that link expands properly */
.custom td {
border: 1px solid black; /* For visual aid */
padding: 10px;
}
/* Change background color on hover of TD element */
.custom td:hover {
background: #ccc;
}
/* Change link color when hovering over TD element */
.custom td:hover a {
color: #fff;
}
/* Make link expand to entire TD element (its parent) */
.custom td a {
display: block;
text-decoration: none;
}
Here is a JS Fiddle example that works without using any JavaScript.
This solution is preferred because it does not use JavaScript and is much easier to understand as another developer.
You only need to add a custom class to your TABLE element so that you can attach CSS styles to it. I've added several comments in the JS Fiddle so be sure to check them out. You can also play with the JS Fiddle example to help you understand it further.

Related

How to use the pseudo selectors in Inline Css in material UI? [duplicate]

I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor.
How can I use a:hover in inline CSS inside the HTML style attribute?
E.g., you can't reliably use CSS classes in HTML emails.

Short answer: you can't.
Long answer: you shouldn't.
Give it a class name or an id and use stylesheets to apply the style.
:hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria).
Response to the OP's comments:
See Totally Pwn CSS with Javascript for a good script on adding CSS rules dynamically. Also see Change style sheet for some of the theory on the subject.
Also, don't forget, you can add links to external stylesheets if that's an option. For example,
<script type="text/javascript">
var link = document.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("href","http://wherever.com/yourstylesheet.css");
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
</script>
Caution: the above assumes there is a head section.

You can get the same effect by changing your styles with JavaScript in the onMouseOver and onMouseOut parameters, although it's extremely inefficient if you need to change more than one element:
<a href="abc.html"
onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'" >Text</a>
Also, I can't remember for sure if this works in this context. You may have to switch it with document.getElementById('idForLink').

You could do it at some point in the past. But now (according to the latest revision of the same standard, which is Candidate Recommendation) you can't
.

You can't do exactly what you're describing, since a:hover is part of the selector, not the CSS rules. A stylesheet has two components:
selector {rules}
Inline styles only have rules; the selector is implicit to be the current element.
The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.
However, you can get close, because a style set can technically go almost anywhere:
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>

If you actually require inline code, this is possible to do. I needed it for some hover buttons, and the method is this:
.hover-item {
background-color: #FFF;
}
.hover-item:hover {
background-color: inherit;
}
<a style="background-color: red;">
<div class="hover-item">
Content
</div>
</a
In this case, the inline code: "background-color: red;" is the switch colour on hover. Use the colour you need and then this solution works. I realise this may not be the perfect solution in terms of compatibility, however this works if it is absolutely needed.

While it appears to be impossible to define a hover-rule inline, you can define the value of styles inline using a CSS variable:
:hover {
color: var(--hover-color);
}
<a style="--hover-color: green">
Library
</a>
Consider using an attribute or a class in addition to the selector (e.g., [hover-color]:hover) to allow coexistence with other low specificity hover color changing rules (from, e.g., a CSS reset or some elements using the default style).

Using JavaScript:
a) Adding inline style
document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');
b) or a bit harder method - adding "mouseover"
document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };
Note: multi-word styles (i.e.font-size) in JavaScript are written together:
element.style.fontSize="12px"

This is the best code example:
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
onmouseover="this.style.color='#0F0'"
onmouseout="this.style.color='#00F'">
Library
</a>
Moderator Suggestion: Keep your separation of concerns.
HTML
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
class="lib-link">
Library
</a>
JS
const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
this.style.color='#0F0'
}
libLink.onmouseout = function () {
this.style.color='#00F'
}

Inline pseudoclass declarations aren't supported in the current iteration of CSS (though, from what I understand, it may come in a future version).
For now, your best bet is probably to just define a style block directly above the link you want to style:
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
Foo!

As pointed out, you cannot set arbitrary inline styles for hover, but you can change the style of the hover cursor in CSS using the following in the appropriate tag:
style="cursor: pointer;"

<style>a:hover { }</style>
Go Home
Hover is a pseudo class, and thus cannot be applied with a style attribute. It is part of the selector.

You can do this. But not in inline styles. You can use onmouseover and onmouseout events:
<div style="background: #333; padding: 10px; cursor: pointer"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
Hover on me!
</div>

According to your comments, you're sending a JavaScript file anyway. Do the rollover in JavaScript. jQuery's $.hover() method makes it easy, as does every other JavaScript wrapper. It's not too hard in straight JavaScript either.

There is no way to do this. Your options are to use a JavaScript or a CSS block.
Maybe there is some JavaScript library that will convert a proprietary style attribute to a style block. But then the code will not be standard-compliant.

You can write code in various type.
First I can write this
HTML
<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>
CSS
.one {
text-decoration: none;
}
You can try another way:
HTML
Hello siraj
CSS
.one {
text-decoration: none;
}
.one:hover {
color: blue;
}
.one:active {
color: red;
}
You can also try hover in jQuery:
JavaScript
$(document).ready(function() {
$("p").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "pink");
});
});
HTML
<p>Hover the mouse pointer over this paragraph.</p>
In this code you have three functions in jQuery. First you ready a function which is the basic of a function of jQuery. Then secondly, you have a hover function in this function. When you hover a pointer to the text, the color will be changed and then next when you release the pointer to the text, it will be the different color, and this is the third function.

I just figured out a different solution.
My issue: I have an <a> tag around some slides/main content viewer as well as <a> tags in the footer. I want them to go to the same place in IE, so the whole paragraph would be underlined onHover, even though they're not links: the slide as a whole is a link. IE doesn't know the difference. I also have some actual links in my footer that do need the underline and color change onHover. I thought I would have to put styles inline with the footer tags to make the color change, but advice from above suggests that this is impossible.
Solution: I gave the footer links two different classes, and my problem was solved. I was able to have the onHover color change in one class, have the slides onHover have no color change/underline, and still able to have the external HREFS in the footer and the slides at the same time!

It's not exactly inline CSS, but it is inline.
<a href="abc.html" onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'">Text</a>

I agree with shadow. You could use the onmouseover and onmouseout event to change the CSS via JavaScript.
And don't say people need to have JavaScript activated. It's only a style issue, so it doesn't matter if there are some visitors without JavaScript ;)
Although most of Web 2.0 works with JavaScript. See Facebook for example (lots of JavaScript) or Myspace.

So this isn't quite what the user was looking for, but I found this question searching for an answer and came up with something sort of related. I had a bunch of repeating elements that needed a new color/hover for a tab within them. I use handlebars, which is key to my solution, but other templateing languages may also work.
I defined some colors and passed them into the handlebars template for each element. At the top of the template I defined a style tag, and put in my custom class and hover color.
<style type="text/css">
.{{chart.type}}-tab-hover:hover {
background-color: {{chart.chartPrimaryHighlight}} !important;
}
</style>
Then I used the style in the template:
<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
Payouts
</span>
You may not need the !important

While the "you shouldn't" context may apply there may be cases were you still want to achieve this. My use case was to dynamic set a hover color depending on some data value to achieve that with only CSS you can benefit from specificity.
Approach CSS only
CSS
/* Set your parent color for the inherit property */
.sidebar {
color: green;
}
/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
color: inherit
}
.list-item a:hover {
color: inherit
}
/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
color: inherit !important;
}
Then your markup will be somewhat like:
Markup
<nav class="sidebar">
<ul>
<li class="list-item">
<a
href="/foo"
class="dynamic-hover-color"
style="color: #{{category.color}};"
>
Category
</a>
</li>
</ul>
</nav>
I'm doing this example using handlebars but the idea is that you take whatever is convenient for your use case to set the inline style (even if it is writing manually the color on hover you want)

You can just use an inline stylesheet statement like this:
<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>

You can use the pseudo-class a:hover in external style sheets only. Therefore I recommend using an external style sheet. The code is:
a:hover {color:#FF00FF;} /* Mouse-over link */

You can do id by adding a class, but never inline.
<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
It is two lines, but you can reuse the class everywhere.

My problem was that I'm building a website which uses a lot of image-icons that have to be swapped by a different image on hover (e.g. blue-ish images turn red-ish on hover).
I produced the following solution for this:
.container div {
width: 100px;
height: 100px;
background-size: 100px 100px;
}
.container:hover .withoutHover {
display: none;
}
.container .withHover {
display: none;
}
.container:hover .withHover {
display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>
I introduced a container containing the pair of images. The first is visible and the other is hidden (display:none). When hovering the container, the first becomes hidden (display:none) and the second shows up again (display:block).

Display an Image by Text rollover

I want to display an image when i rollover an text... like the "title" attribute in a small box at the mousepointer...
It should work without big extras or additional installations.
Thanks for the help!

The title attribute when hovered shows the text, not interpreted HTML.
One way you can show an image when the cell is hovered is to have the image sitting in the cell all the time but starting off with display: none.
With CSS you can set a different style when it is hovered, its child img element can be shown then and in this snippet it is shown with absolute positioning so it does not move adjacent elements.
This is just a start to give some ideas of how to get going on this. Obviously you will want to play with size and positioning of the tooltip to suit your use case. For example, is this text definitely within a table cell or just a div somewhere?
td img {
display: none;
}
td:hover img {
display: inline-block;
position: absolute;
z-index: 1;
}
<table>
<tr>
<td colspan="3">Castrol EDGE 5W-30 LL<img src="https://i.stack.imgur.com/63PQA.jpg"></td>
</tr>
</table>

fullcalendar past month container styling

I try to style fullcalendar past month container to fill with the background color, I style the date, head by CSS works fine, but just this one won't work. I use chrome inspect to see the HTML tag, and change style in CSS, it won't show up, please help.
Thanks!
// Here's the HTML tag //
<td class="fc-day fc-widget-content fc-mon fc-other-month fc-past"
data-date="2017-10-30"></td>
// My CSS //
.fc-day .fc-widget-content .fc-other-month .fc-past {
background: orange !important;}
Thank you all.

Got it. You are using this CSS:
.fc-day .fc-widget-content .fc-other-month .fc-past {}
... but that means .fc-past inside .fc-other-month inside .fc-widget-content inside .fc-day.
However because your html has all those classes on the one element, you need to have a selector that says "match all these":
.fc-day.fc-widget-content.fc-other-month.fc-past {}
But really, you could just select one of them. Over-specificity is never a good thing.

How to prevent HTML automatic line breaking between field and button

Hi,
I'm currently in the process of making a web app that consists of the above field and button the code is below. Although I removed the actual button code to protect my works privacy. Does anyone know by any chance how to make it so both these objects are on the same line.
Thanks
Brad
<td class="two td_left" nowrap="nowrap">${row.ACCO60?html} (Code for button here followed by the closing td tag)
#stett Here is the generated HTML code at runtime for that specific part of the table.
<
td class="one td_left" nowrap="nowrap">Ref</td>
<td class="two td_left" nowrap="nowrap">10004
<a height="" href="javascript:void(window.open(Don't need to see this part))" id="squarebutton" linkedtype="M" mrc="" width=""><span>Amend company details</span></a>
</td>

Without the actual html that is generated by the expressions ${row.ACCO60?html} and the button code, it's hard to directly advise on the styling necessary to achieve what you're going for, but my instinct is (in the CSS) to select for those elements, and set their display mode to inline or inline-block using the following CSS statement:
display: inline-block;
This tutorial provides a fuller explanation of inline-block elements.

Put your ${row.ACCO60?html} in a div, and set the styling for the containing div and the button to:
#divId {
display: inline;
width: x%;
}
#buttonId {
display: inline;
width: y%;
}
, where x + y <= 100. This will tell the browser to display the second element on the same line, if possible, and set their combined width to a size less than or equal to the size of their containing element (the td).

Add a CSS that enlarge the value when the mouse hovers over it

I have a table inside an html page created by Javascript and hold number inside its cells i want to enlarge the number when the mouse hovers over it using css style.

I'd do something like:
table td:hover {
font-size: 1.1em;
}
This way, you're sure to have a bigger font than what's already there.

look into css :hover selector
this mainly works for anchor tags in most browsers, if you want to do hover for other elements you might want to use javascript

Here's an example: http://jsbin.com/urube4/edit
You can either use the :hover psuedo-selector on the td, or on the span inside, depending on the effect you want.
The first table in the example will only activate the hover on the mouseover of the text, while the second example will activate on the mouseover of the table cell.
As stated, you'll have an issue here with IE6, as it only recognizes :hover on a tags and form elements such as button and input. If you want IE6, you'll need to use JavaScript.

table td:hover {
font-size: 14px; // greater than actual size
}

We Keep Coding

JavaScript is the programming language of the Web.