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;
}
Related
I'm trying to add hover effect to a span element as shown below.
Hover effect doesn't work when added inside
style prop.
But, If it is written in separate css file it will work
I just want to know, Why it is So?
https://codesandbox.io/s/happy-resonance-stqbf9?file=/src/App.js
App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<span
style={{
fontSize: "4em",
color: "blue",
"&:hover": {
color: "green"
}
}}
>
Element
</span>
<div></div>
<span className="ele">Element 2</span>
</div>
);
}
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.ele {
font-size: 4em;
color: blue;
}
.ele:hover {
font-size: 6em;
color: green;
}
You need to use JSS Plugin which supports the psudo-selectors inline style, or you should use Material UI, which also support this plugin.
That because we can't specify the inline styles for pseudo elements and pseudo classes. You can use it with the,
Internal - by using a <style> element in the section.
An internal CSS is defined in the section of an HTML page, within a element.example
External - by using a element to link to an external CSS file
To use an external style sheet, add a link to it in the section of each HTML page.example
I want to inject style to div in component. My issue is it's scss and in application we use scss but style does not want to work. When inject the same style as css one. Everything works fine. The question is how can I force my component to execute style like this? Is it even possible or should I convert scss style to css one?
HTML.TS
<div id="myExampleId">
<div #htmlContainer [innerHtml]="htmlToDisplay | safehtml"></div>
</div>
Style to display in component:
<style>
#myExampleId {
table {
border-collapse: collapse;
width: 100%;
}
th{
background-color:#fe996b;
}
td, th {
border: 1px solid #999;
padding: 0.5rem;
text-align: left;
}
body {
background-color: #fe996b;
}
}
</style>
Import the styles not in the template but in the component itself.
Look in Angular docs https://angular.io/guide/component-styles
am working on react with Dropzone. my requirement is i do need to show Dropzone area a text like in the center when we drag files to drop area( text: you are inserting files) + a blue border in the drop area
my code looks like
<Dropzone
disableClick={true}
className={styles.dropStyle}
dropzoneActive={{ borderColor: 'green' }}
onDrop={e => this.props.change(e)}
>
<div>...this is the dropzone area...</div>
</DropZone>
Here border color green is not coming , its taking only dropStyle css+ plus i need to show a text inside the div only when we drag files to zone area.
I mean its a normal div with lot of assets, when we drop only css should apply( means dropzoneActive css should be visible )
Any fiddle will be highly appreciated
Are you using react-dropzone? Since typings does not have a className and dropzoneActive prop I am wondering how you got that working. Anyway...
Here is some code I used for Dropzone
React:
<Dropzone
onDrop={// do stuff here}
accept='image/jpg,image/jpeg,image/png'
multiple={true}
>
{({ getRootProps, getInputProps }) => {
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
{
<p className='fileDrop'>
Try dropping one or more files here
</p>
}
</div>
);
}}
</Dropzone>
CSS:
.fileDrop {
background: #f5f5f5;
border: 1px dashed #c2c2c2;
border-radius: 3px;
text-align: center;
padding: 36px;
font-family: "Montserrat", sans-serif;
font-size: 12px;
font-weight: 600;
}
.fileDrop:hover {
background: rgb(194, 243, 194);
border: 1px dashed #333;
}
I see two ways to achive your goal.
1st is with css like render a div with class hidden and on hover you display the content.
<Dropzone
onDrop={// do stuff here}
accept='image/jpg,image/jpeg,image/png'
multiple={true}
>
{({ getRootProps, getInputProps }) => {
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
{
<p className='hidden-text'>
Try dropping one or more files here
</p>
}
</div>
);
}}
</Dropzone>
.hidden-text {
display: none;
border: 1px solid green;
}
.hidden-text:hover {
display: block or whatever
border: 1px solid blue;
}
2nd is you write your own javascript event handler to render the text on hover.
I'm using an onmouseover/onmouseout over a table cell to change the styling for an image and a link in the cell. It works but is overriding the CSS link styling, namely the text-decoration: none and font color. I've tried correcting with inline CSS, but no dice. Any ideas? Also, I know the code is hideous. I just want to get it working before I put it into an external js file.
<td
onmouseover="
document.getElementById('myImage').style.border='3px solid #334f92';
document.getElementbyId('myLink').style.fontWeight='bold';
document.getElementbyId('myLink').style.textDecorationLine='none';""
onmouseout="
document.getElementById('myImage').style.border='1px solid #000000';
document.getElementbyId('myLink').style.fontWeight='normal';
">
First off, good thing you recognize that writing inline event listeners are not very conventional (and also hideous).
Have you considered achieving this through CSS? It may be a lot simpler and would eliminate the need for two separate event listeners for mouseover and mouseout. You would simply use the :hover css selector like so:
td {
border: 1px solid black;
/* Added padding for demonstration purposes */
padding: 20px;
}
td:hover {
border: 3px solid #334f92;
font-weight: bold;
text-decoration: none;
}
td:hover a {
color: orange;
}
td:hover img {
border-radius: 10px;
}
<table>
<tr>
<td>
Link
<img src="https://via.placeholder.com/100">
</td>
<td>
Link
<img src="https://via.placeholder.com/100">
</td>
</tr>
</table>
In addition, if you wanted to style an image within the <td> tag, you can do this:
td:hover img {
/*Apply CSS to image here*/
}
I'm trying to emulate hovering over an element with a mouse, using jQuery.
This is different from adding :hover to the element; I want something similar in function to using $(element).click(), however doing $(element).hover() doesn't work for me.
The element in question is (as far as I can see) using the jQuery UI datepicker with a tooltip on hover; for a live example, see an AirBnB listing, click the "dates" calendar input on the right hand side and hover over an available date.
I want to trigger the hover over each available date to get the price to hover above, although doing:
$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable)').each(function(){
$(this).hover()
})
or simply
$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable)')[0].hover()
doesn't work for me, nor does using mouseover(). Any idea how I can replicate this behaviour?
You should try trigger-ing the event:
$("element").trigger('mouseenter');
Also look at this post on SO, looks very similar to yours.
Well, you can do this just with CSS, here's a simplified example:
.td-hover td {
position: relative;
width: 1em;
border: 1px solid #ddd;
}
.on-hover {
display: none;
position: absolute;
top: -1.5em;
left: -1em;
background: #eee;
border: 1px solid black;
}
.td-hover td:hover .on-hover {
display: inline-block;
}
<table class="td-hover">
<tbody>
<tr>
<td>1<span class="on-hover">one</span></td>
<td>2<span class="on-hover">two</span></td>
<td>3<span class="on-hover">three</span></td>
<td>4<span class="on-hover">four</span></td>
<td>5<span class="on-hover">five</span></td>
<td>6<span class="on-hover">six</span></td>
<td>7<span class="on-hover">seven</span></td>
</tr>
<tr>
<td>8<span class="on-hover">eight</span></td>
<td>9<span class="on-hover">nine</span></td>
<td>10<span class="on-hover">ten</span></td>
<td>11<span class="on-hover">eleven</span></td>
<td>12<span class="on-hover">twelve</span></td>
<td>13<span class="on-hover">thirteen</span></td>
<td>14<span class="on-hover">fourteen</span></td>
</tr>
</tbody>
</table>
But if you insist on using JavaScript instead, just use jQuery's hover to add/remove a class:
$(".td-hover td").hover(
function() {
$(this).find(".on-hover").addClass("showing");
},
function() {
$(this).find(".on-hover.showing").removeClass("showing");
}
);
.td-hover td {
position: relative;
width: 1em;
border: 1px solid #ddd;
}
.on-hover {
display: none;
position: absolute;
top: -1.5em;
left: -1em;
background: #eee;
border: 1px solid black;
}
.on-hover.showing {
display: inline-block;
}
<table class="td-hover">
<tbody>
<tr>
<td>1<span class="on-hover">one</span></td>
<td>2<span class="on-hover">two</span></td>
<td>3<span class="on-hover">three</span></td>
<td>4<span class="on-hover">four</span></td>
<td>5<span class="on-hover">five</span></td>
<td>6<span class="on-hover">six</span></td>
<td>7<span class="on-hover">seven</span></td>
</tr>
<tr>
<td>8<span class="on-hover">eight</span></td>
<td>9<span class="on-hover">nine</span></td>
<td>10<span class="on-hover">ten</span></td>
<td>11<span class="on-hover">eleven</span></td>
<td>12<span class="on-hover">twelve</span></td>
<td>13<span class="on-hover">thirteen</span></td>
<td>14<span class="on-hover">fourteen</span></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>