show a span on tag hover to delete it maybe

This commit is contained in:
lukas 2021-03-03 22:02:08 +01:00
parent 219124c843
commit 9f960a2af4
2 changed files with 29 additions and 8 deletions

View File

@ -1,19 +1,37 @@
.tagbtn {
background-color: #3574fe;
.btnnostyle {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.tagbtnContainer {
background-color: #3574fe;
border-radius: 10px;
color: white;
margin-left: 10px;
margin-top: 15px;
width: 50px;
/*font-weight: bold;*/
padding: 5px 15px 5px 15px;
}
.tagbtn:focus {
.tagbtnContainer:focus {
background-color: #004eff;
outline: none;
}
.tagbtn:hover {
.tagbtnContainer:hover {
background-color: #004eff;
}
.deletebtn{
display: none;
}
.tagbtnContainer:hover .deletebtn {
display: inline;
}

View File

@ -42,10 +42,13 @@ class Tag extends React.Component<props, state> {
renderButton(): JSX.Element {
return (
<button className={styles.tagbtn}
<span className={styles.tagbtnContainer}>
<button className={styles.btnnostyle}
onClick={(): void => this.TagClick()}
onContextMenu={this.contextmenu}
data-testid='Test-Tag'>{this.props.tagInfo.TagName}</button>
<span className={styles.deletebtn}>X</span>
</span>
);
}