We Keep Coding

why hover not working on tr

I try to put hover on tbody and td. It's work well BUT on tr it's not work.
I use inline style( js pattern) not CSS code and using Radium.
Here this is my code
<tr key={id} style={styles.row} onClick={click}>
<td style={stylestd}>
<span style={styles.data}>asdc</span>
</td>
</tr>
AND this one is my style.
row: {
display: 'table-row',
borderBottom: '1px solid #ddd',
height: '20px',
':hover': {
cursor: 'pointer',
backgroundColor: 'red',
},
},
Thank you.

I've posted the answer and i think this will help you to solve the problem.
Write the css code for hover effect seperately.
tr:hover{
cursor: pointer;
background-color:red;
}
<table>
<tr key={id} style="border 1px solid;" onClick={click}>
<td>
<span >asdc</span>
</td>
</tr>
</table>

You are using inline style style={styles.row} and using :hover inside this will not work. You need to define :hover rule in css explicitly.
For more info, see this post.
: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).
Alternatively, you can use onMouseOver and bind style on this.
<tr key={id} style={styles.row} onClick={click} onMouseOver={hoverrule}>
There's also library Styled-components, and using it allows you to nest css with hover rule.
See this example extracted from here:
import React from 'react';
import styled from 'styled-components';
const Div = styled.div`
margin: 40px;
border: 5px outset pink;
&:hover {
background-color: yellow;
}
`;
const Paragraph = styled.p`
font-size: 15px;
text-align: center;
`;
const OutsetBox = () => (
<Div>
<Paragraph>Get started with styled-components 💅</Paragraph>
</Div>
);
export default OutsetBox;
I am not giving an example with tr because I don't think you really need this library for just using hover style. If you think it would be better to utilize this library, then I hope you can workout with this solution.

Updated code use this one it will work:
<tr key={id} style={styles.row} onClick={click}>
<td style={stylestd}>
<span style={styles.data}>asdc</span>
</td>
</tr>
You can't use inline css for hover, you have to write internal or external css:
tr{
display: table-row;
border-bottom: 1px solid #ddd;
height: 20px;
}
tr:hover{
cursor: pointer;
background: #red;
}

CSS style is not applying to button in React component

I have my CSS stylesheet in my index.html file where my React app is loaded. In here I have the following CSS values :
#Webshop {
background-color: white;
height: 100%;
width: 100%;
}
and
#Webshop, button {
position: relative
border: 6px solid #232323
z-index: 2
padding: 12px 22px
margin: 0 10px
box-sizing: border-box
font-size: 26px
font-weight: 600
text-transform: uppercase
text-decoration: none
color: #232323
}
Webshop is located in a different file that contains this Render method:
render() {
return (
<div className='Webshop' id='Webshop'>
<li>
<img src="./products.jpeg" width="350" height="350"></img>
<button onClick={this.handleClick} className="addit">Add to cart</button>
<select id="size" onChange={this.change} value={this.state.value}>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-large</option>
</select>
<img src="./product.jpeg" width="350" height="350"></img>
</li>
</div>
);
}
For some reason the CSS applies to Webshop but not to the button. I have other Components in other files the work also. How can I get the CSS to apply to the button in the Render method?

The first two are critical, the last two are advices.
1. remove the comma like so:
#Webshop button {
...
}
2. CSS semicolons are a must, while in JavaScript you can omit them, which is being encouraged to do so in Standard.js rules.
3. The img tags should be self-closing like so: <img />. In fact any element without a text within them should follow as well.
4. Avoid using IDs in your CSS. Read more about CSS Specificity.

Try applying button style separately. Currently the second style applies to #webshop and button as you separated them with comma, which is strange, why would you apply same styling to a div element and a button element? Try doing #webshop button or #webshop > button instead and applying button styles separately.
Also you are missing semicolons at the end of each property in the second style bit which is probably an issue here.

Check https://www.w3schools.com/cssref/css_selectors.asp
Right now you are applying
#Webshop, button {
position: relative
border: 6px solid #232323
z-index: 2
padding: 12px 22px
margin: 0 10px
box-sizing: border-box
font-size: 26px
font-weight: 600
text-transform: uppercase
text-decoration: none
color: #232323
}
to all elements that either have Webshop id or are buttons,
it should look more like
#webshop button {
...
}

Remove border in td ( more!) [duplicate]

This question already exists:
remove border in TD (more!) [closed]
Closed 9 years ago.
I'm getting old code in the company and the same in this table do not have time today to switch to DIV so I need some help ...
The class "Mensagem" has an edge that is to be displayed only when there is an answer to the user who will be the inerida lblResposta .... but when we load the page border is displayed without having any text inside how can I solve this case ....
Note: refactoring needs to be simple because it has over 500 pages with this error.
CSS
.TB_Mensagem {
margin: 10px 0 0 0;
width: 98%;
}
.Mensagem {
border: 2px dotted; border-color: # ff7838;
color: # ff7838;
font-family: arial;
font-size: 10px;
line-height: 15px;
padding-left: 5px;
padding-top: 2px;
text-transform: uppercase;
}
HTML
<table class="TB_Mensagem">
<tr>
<td class="Mensagem">
<asp:Label ID="lblResposta" runat="server"> </ asp: Label>
</td>
</tr>
</table>

EDIT re-reading your question, this shouldn't fit your needs.
You can use only CSS (CSS3) using :empty pseudo class:
http://jsfiddle.net/zReBX/
.Message:empty{display:none} /* or Messagem depending where is your typo! */
EDIT
$(document).ready(function () {
$('td.Mensangem').filter(function () {
return $.trim(this.innerHTML) === ""
}).css('border-style', 'none');
});

You cannot do this with css alone. This can, however, be easily dealt with using javascript (and jQuery). With jQuery you can add something like this on the page:
$(document).ready(function() {
$('td.Mensangem:empty').css('border-style','none');
});

table td has a class of "Messagem", but the CSS you posted is for .Message
anyways, try:
table tr td.Messagem {border:none !important;}

Make table cells with <a> clickable and respect tabbed browsing

Right now I'm doing a td.click() and then window.location = td.find('a').attr('href') but it doesn't work if I'm clicking to make a new tab.
And I can't programmatically click the <a>.
Any ideas?
Feel free to fork this fiddle http://jsfiddle.net/uDQPr/

You could make the <a> fill up the entire cell. That way, you won't need any additional JavaScript to handle the click event. Adding target="_blank" to your <a> link will make it always open in a new tab (or a new window, for browsers that don't support tabs). Working example at http://jsfiddle.net/vTyAc/2/.
Here's the table code:
<table>
<tr>
<td>
Apple
</td>
<td>
YouTube
</td>
</tr>
</table>
And the CSS:
td {
border: 1px solid;
}
a {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
padding: 10px
}
a:hover {
text-decoration: underline;
}

How to apply :hover to an element

I want to apply the hover state remotely, by hovering on a different object. But I want to name the object that has its hover activated rather than have it be by DOM relationship to the item being hovered over.
<style>
img:hover {border: thin red solid;}
</style>
<li id="hover-over-me">Dogs</li>
<img src="dog.jpg" />
I haven't found a javascript or jquery method that allows you to apply the hover pseudo-class effect to an element remotely (ie independently of it actually being hovered). Is there a way to do this?

http://sandbox.phpcode.eu/g/3304b
<style>
img:hover,img.hovered {border: 5px red solid;}
</style>
<ul>
<li id="hover-over-me">Dogs</li>
</ul>
<img src="http://4.bp.blogspot.com/_7VyEDKFMA2U/TOX9ZL7KRPI/AAAAAAAAACM/-XSoYjePBPk/s1600/cute-puppy-dog-wallpapers.jpg" />
<script>
$("li").mouseenter(function(){
$("img").addClass('hovered');
});
$("li").mouseout(function(){
$("img").removeClass('hovered');
});
</script>

If you mean specifically the CSS :hover pseudo selector, then one element can only trigger it on another insofar as a relationship can be established in CSS:
http://jsfiddle.net/tFSWt/
example as siblings:
<span>Sibling </span><img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" />
img:hover { border: 2px dashed blue; }
span:hover + img { border: 2px dashed blue; }
example as ancestor/descendant:
<span>Parent
<img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" />
</span>
img:hover { border: 2px dashed blue; }
span:hover img { border: 2px dashed blue; }
Otherwise you'll need to rely on JavaScript to select the related element and set the style on either by inline styling, or by adding a class that provides the appropriate style.