I have a clickable div I created that works like a button. I managed to create it's :hover state, but I can't get the :active state to work. I basically need the button to maintain its :hover style when clicked. I would like to use CSS only. I'm using Bootstrap 4.
.delete-ad-reason-box {
display: inline-block;
width: 100%;
border: 2px solid red;
border-radius: 0.25rem;
color: red;
font-size: 1em;
margin: 30px 0;
padding: 20px 15px;
line-height: 20px;
}
.delete-ad-reason-box i {
font-size: 1.5em;
margin-bottom: 10px;
color: red;
}
/* Here's the ":active" */
.delete-ad-reason-box:hover,
.delete-ad-reason-box:active {
border: 2px solid red;
background: red;
color: white;
}
.delete-ad-reason-box:hover>i,
.delete-ad-reason-box:active>i {
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<a href="#" class="col-lg-4 col-md-4 col-sm-10 col-xs-10 col-10">
<div class="mx-auto delete-ad-reason-box" id="#">
<i class="fas fa-frown d-block"></i> Click Me
</div>
</a>
You can't use : active for a div element. You can able to achieve it via javascript only
I suggest you use only 1 anchor tag element for this one. :active :focus pseudo element only works on a tag. So simplify your html structure to this one.
.click-me {display:block;color:red;border:1px solid red;width:100%;padding:20px 10px;text-decoration:none;font-weight:bold;}
.click-me:hover,.click-me:active,.click-me:focus {border:1px solid transparent;color:#fff;background:red;}
Click Me
This is a more simplified one and you don't need to add a div element inside the a tag.
Related
I have a div that contains different buttons and other divs working as a accordion.
I want to give all the buttons a border-bottom except for the last one.
The UI and html looks like this:
And I've tried using the :not(:last-child) selector, but as you can see in the first screenshot it isn't working and the last button still has the border-bottom.
.accordion {
background-color: #eee !important;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.accordion:not(:last-child) {
border-bottom: 1px solid black;
}
<button class="accordion">Test</button>
<button class="accordion">Test</button>
<button class="accordion">Test</button>
<button class="accordion">Test</button>
<button class="accordion">Test</button>
(Also the snippet in JsFiddle)
What am I doing wrong here?
Thanks in advance
The children are of the parent div. And in your case, the last-child is <div class="panel">. A
better wording would be: The element must be the last element, regardless of selectors.
.accordion:not(:last-child) {
border-bottom: 1px solid darkgray;
}
<div class="parent">
<div class="accordion">hi</div>
<div class="accordion">hi</div>
<div class="accordion">hi</div>
</div>
I've been attempting to build the following (figma):
As it stands i've tried padding, margins, psudeo elements, whitespaces and I'm pretty stuck on what to do. You can see its possible to have the underline styles on the icon, but when I create distance from 'ID', the underline gap appears. I need the icon to stay as far away as it is here but also keep the underline crossing.
HTML: Please note 'input-row' cannot be styled in this instance as it's used across other elements
<div class="input-row">
<a class="link" href="#">Acceptable Forms of ID <i class="fas fa-share-square"></i></a>
</div>
.fa-share-square{
font-size: 0.75rem;
cursor: pointer;
color: $secondary-five;
font-size: 1rem;
text-decoration: underline dotted $secondary-five;
text-underline-offset: .5rem;
text-decoration-thickness: 2px;
}
.link{
color: $secondary-five;
font-size: 1rem;
text-decoration: underline dotted $secondary-five;
text-underline-offset: .5rem;
text-decoration-thickness: 2px;
}
Thanks for your help.
You have a input-row container around these 2 elements,
Add the underline to the container, use margin and or padding to get it right under the text.
Revised Answer
It appears that I had misunderstood your original request. I now understand that you want the underlined (dots) to appear uniformly for the anchor including the space between the text and the Font Awesome icon.
This is more simple than the previous answer.
You will first need to remove the default text-under line from HTML anchors, this is done in the a.link CSS below.
Then you style the anchor as an inline-block/block level element (which it is by default), and style a border rather than text-underline, because text-underline won't (and symantically shouldn't) activate on a lack of text (whitespace). You can also customise the gap between the text and the underline using padding.
So:
HTML:
<div class="input-row">
<a class="link" href="#">Acceptable Forms of ID <i class="fas fa-share-square"></i></a>
</div>
And then you set your CSS styling thus:
CSS:
.fa-share-square{
font-size: 0.75rem;
cursor: pointer;
color: $secondary-five;
font-size: 1rem;
}
a.link {
color: #900;
font-size: 1rem;
text-decoration: none;
padding-bottom: 2px;
border-bottom: 2px dotted #00F;
}
Full example:
.fa-share-square{
font-size: 0.75rem;
cursor: pointer;
color: #900;
font-size: 1rem;
}
a.link {
color: #900;
font-size: 1rem;
text-decoration: none;
padding-bottom: 3px; /* Set the border distance from the text */
border-bottom: 3px dotted #00F; /* Set the border style */
}
.fa-share-square {
width: 3rem;
height: 1rem;
padding-left:1rem;
}
<p>(Extra CSS put in place to show the Font Awesome Icon part)</p>
<div class="input-row">
<a class="link" href="#">Acceptable Forms of ID
<i class="fas fa-share-square">ICON</i></a>
</div>
Manual Reference for CSS Border-bottom.
I had a stroke of genius in the shower. Line spacing.
At first I tried this on the Icon, but the spacing moved the underline to the right, so I needed to apply it to the letter beforehand.
Here you can see my changes and result.
<div class="input-row">
<a class="link" href="#">Acceptable Forms of I<span>D</span> <i class="fas fa-share-square"></i></a>
</div>
.link{
color: $secondary-five;
font-size: 1rem;
text-decoration: underline dotted $secondary-five;
text-underline-offset: .5rem;
text-decoration-thickness: 2px;
font-weight: bold;
}
span{
letter-spacing: 12px;
}
Some minor issues with the dots overlapping each other at certain spacing values, but this is a lot closer to a solution than anything else
You can simply remove text-decoration from your css and update as follows. Also set text-decoration:none for the .link class. Finally set border-bottom for the class input-row and width:fit-content. I am using color:red, you can use of your own choice.
HTML code:
<div class="input-row">
<a class="link" href="#">Acceptable Forms of ID <i class="fas fa-share-square"></i></a>
</div>
Updated CSS:
.fa-share-square {
font-size: 0.75rem;
cursor: pointer;
color: red;
font-size: 1rem;
/*text-decoration: underline dotted red;
text-underline-offset: .5rem;
text-decoration-thickness: 2px;*/
}
.link {
color: red;
font-size: 1rem;
text-decoration: none;
/*text-decoration: underline dotted red;
text-underline-offset: .5rem;
text-decoration-thickness: 2px;*/
}
.input-row {
border-bottom: 2px dotted red;
width: fit-content;
}
I have a button div which contains two child div elements. One with a count class, and one with a caption class.
If I don't set a color for the .count class, then the button hover style (white) will apply to the count div. However, if I set a color in the .count class, then the button hover, no longer applies to the count class/div. I can define a hover style for the count div, however it will only apply when the cursor moves over the count, not the button as a whole. How can I set a specific color for the count class, but still have it's color change (to button hover color) when hover over the button?
Sample Code:
.button {
margin: 8px;
padding: 4px;
border: 1px solid black;
text-align: center;
cursor: pointer;
background-color: lightgrey;
}
.button .count {
font-size: 30px;
color: green;
}
.button:hover {
color: white;
background-color: gray;
}
.button .count:hover {
color: white;
}
<div class="container">
<div class="button">
<div class="count">
2
</div>
<div class="caption">
Videos
</div>
</div>
</div>
Sample demo:
https://codepen.io/raelb/pen/OJWrpKw
Just add a second selector targetting the child element in your .button:hover rule:
.button {
margin: 8px;
padding: 4px;
border: 1px solid black;
text-align: center;
cursor: pointer;
background-color: lightgrey;
}
.button .count {
font-size: 30px;
color: green;
}
.button:hover {
background-color: gray;
}
.button:hover,
.button:hover .count {
color: white;
}
<div class="container">
<div class="button">
<div class="count">
2
</div>
<div class="caption">
Videos
</div>
</div>
</div>
There's nothing forcing you to end your selector with :hover.
You are facing a css priority issue :)
The colour property defined inside the count class has a higher priority than the one you declare in the hover pseudo-class of your button.
A way to solve that would be to use:
.button:hover count { color: white; }
This question is in reference to this documentation https://en.bem.info/methodology/css/#external-geometry-and-positioning
The parent class is "header" and the button is "button header__button". Typically, I would use (and see elsewhere in tutorials) "button button--header".
My site uses dropdown menus with the class "dropdown-menu" and I am also using "dropdown-menu--nav" but is "--nav" an appropriate modifier? By the logic in the documentation, I should use "dropdown-menu navbar__dropdown-menu". I'm lost because I can see both navbar and dropdown-menu being their own blocks, but when they interact with each other, I'm not so sure. If navbar is the block and dropdown-menu is the element, should I use "dropdown-link navbar__dropdown-link" instead of "dropdown-menu__link dropdown-menu__link--nav" for links?
I could see the "element block__element" approach working better because the block specific styling to that element would be near the block styling, instead of with the element styling as a modifier.
Example of how I use BEM for button example and dropdown menu: https://codepen.io/SROwl/pen/eYmVzBE
Explanation:
I would write dropdown-menu--nav as dropdown-menu__nav as it is a component of the dropdown menu. Also, I tend to rebase inner components seen in the nav example below.
The button example is used to show multiple classes being used to create the button look you want. However, if the .button class doesn't have any of the same styles as .header__button then this would not be necessary. You would simply use .header__button.
I would use a modifier if I wanted to change the button color, ex: .header__button--green.
I stray away from the BEM documentation a little where they want you to use something like: < div class="header__button header__button--green">. I use SCSS extends to include the properties of header__button to header__button--green so the markup ends up being: < div class="header__button--green"> rather than including both classes. This is a personal preference, some people do not like extends as they find it difficult to manage or don't like the way it compiles the css.
BEM
<!-- How BEM states it should be done -->
<div class="button">Shop Now</div>
<div class="button header__button">Shop Now</div>
<div class="button header__button header__button--green">Shop Now</div>
BEM EXTEND
<!-- How I prefer to do it -->
<div class="button2">Shop Now</div>
<div class="header__button2">Shop Now</div>
<div class="header__button2--green">Shop Now</div>
BEM NAV
<div class="dropdown-menu">
<div class="dropdown-menu__header">
Menu
</div>
<ul class="dropdown-menu__nav">
<li class="nav__link">Link 1</li>
<li class="nav__link--active">Link 2</li>
<li class="nav__link">Link 3</li>
</ul>
</div>
body {
font-family: sans-serif;
}
// BEM WAY
.button {
background: #000;
color: #fff;
border-radius: 5px;
font-size: 16px;
text-align: center;
max-width: 200px;
padding: 5px 15px;
text-transform: uppercase;
margin-bottom: 10px;
}
.header__button {
font-size: 32px;
color: #ccc;
&--green {
background-color: green;
}
}
// BEM-ish way
.button2 {
background: #000;
color: #fff;
border-radius: 5px;
font-size: 16px;
text-align: center;
max-width: 200px;
padding: 5px 15px;
text-transform: uppercase;
margin-bottom: 10px;
}
.header__button2 {
#extend .button2;
font-size: 32px;
color: #ccc;
&--green {
#extend .header__button2;
background-color: green;
}
}
// BEM-ish menu
.dropdown-menu {
background: gray;
width: 300px;
padding: 15px;
&__header {
background-color: #ccc;
padding: 5px;
}
&__nav {
background: darken(#ccc, 20%);
padding: 10px;
list-style-type: none;
.nav {
&__link {
text-transform: uppercase;
color: purple;
padding: 5px;
&--active {
#extend .nav__link;
color: pink;
background: gray;
}
}
}
}
}
I have this HTML Code
<a href="test.html">
<div class=" menubox mcolor1">
<h3>go to test page</h3>
</div>
</a>
and this is the css
.menubox {
height: 150px;
width: 100%;
font-size: 14px;
color: #777;
margin: 0 0 0 0;
padding: 0;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;}
.mcolor1 { background: #3A89BF url(../images/prod2.png) no-repeat center center; }
on mouse hover this div, the text shows the hyperlink line, how can I hide it?
As others have suggested, it's easy to remove the underline from links. However, if you need to target just this specific link, try giving it a class. Example:
.no-underline:hover {
text-decoration: none;
}
<a href="test.html" class="no-underline">
<div class=" menubox mcolor1">
<h3>go to test page</h3>
</div>
</a>
If you want to remove the underline on hover, use this CSS:
a:hover {
text-decoration: none;
}
Note :
Unless your page uses the HTML5 doctype (<!doctype html>), your HTML structure is invalid. Divs can't be nested inside a element before HMTL5.
With the HTML as it stands, you can’t hide the link underline just for this link.
The following CSS will remove the underline for all links:
a:hover {
text-decoration: none;
}
To remove it for just this link, you could move the link inside the <div>:
.menubox > a {
display: block;
height: 100%;
}
.menubox > a:hover {
text-decoration: none;
}
<div class="menubox mcolor1">
<a href="test.html">
<h3>go to test page</h3>
</a>
</div>