This question already has answers here:
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
(6 answers)
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed 3 days ago.
I am learning CSS and I am stuck in a specific task.
I want to have an icon next to some text. When I hover over the icon I want to display some other content which is initially hidden. The html code is:
<div id="dropdown">
dropdown
<img id='icon' src="./icon.png" width="24px" height="24px">
<div id="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
And CSS:
#dropdown {
border:solid red;
}
#dropdown-content {
display: none;
position:absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index:1;
}
#icon:hover #dropdown-content {
display: block;
}
My problem is that when I hover over the icon nothing happens.
Instead when I change the last CSS segment to:
#dropdown:hover #dropdown-content {display:block;}
then everything works fine. I dont understand why this is happening. Thanks in advance.
Related
This question already has answers here:
Text blended over background color
(1 answer)
Dual-Color Text
(2 answers)
black and white text based on background image with css
(2 answers)
Closed 11 months ago.
So, I was practicing in HTML and CSS as usual and yesterday I started working on a PSD template. It seemed easy for me, but in a few seconds, I bunched in the issue that I am talking about right now.
In general, I want to change the exact part of a text based on its background. I've already tried "mix-blend-mode", but unfortunately, the result wasn't satisfying for me.
Here is what I want.
So, as you can see the text before the center is white-colored, but the text after the center has the same color as the background before the center.
Is there any way to do that using CSS or maybe even Javascript.
You could do something like this:
<style>
.container {
display:block;
position:relative;
width:150px;
height:50px;
text-align: center;
}
.black-half div {
background: #000;
color: #fff;
}
.white-half div {
background: #fff;
color: #000;
width:150px;
}
.white-half {
height: 100%;
width: 50%;
overflow: hidden;
position: absolute;
}
.black-half {
height: 100%;
position: absolute;
}
</style>
<div class="container">
<div class="black-half">
<div>Split background and text color</div>
</div>
<div class="white-half">
<div>Split background and text color</div>
</div>
</div>
This question already has answers here:
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 3 years ago.
I have a "Read more" button on Section-e that acts weird: the margins are not responding except for left one.
GitHub Repo: https://github.com/CalogerN/Conquer
Live Preview: https://calogern.github.io/Conquer/
I tried debugging, but I found nothing.
.section-e__btn {
align-self: flex-start;
margin: 28px 0px 30px 20px;
padding: 15px 30px;
background-color: white;
font-family: "Open Sans";
}
<div class="section-e__column1">
Read more
</div>
Use display: block or display: inline-block to set margins on the <a> tag.
This question already has answers here:
How to change text transparency in HTML/CSS?
(10 answers)
Closed 7 years ago.
I'm making a portfolio and I'd like to know how to set a div property that makes the div's TEXT transparent and background and such opaque.
Use rgba and set the opacity to 0 (the last value).
color:rgba(0, 0, 0, 0);
See here
UPDATE
Now that you have clarified your question... SVG would be your best bet. See fill-opacity
Try the red,green,blue,alpha value for the color
div{
width: 50%;
height: 50%;
background: green;
}
p{
font-size: 30px;
font-weight: bolder;
color: rgba(0,0,0,.1);
}
<div>
<p> your text </p>
</div>
This question already has answers here:
Outline radius?
(24 answers)
Closed 7 years ago.
My code so far allows me to click on a button with rounded edges as I have applied the border-radius feature. However, when I click on the button the borer is still squared and so looks horribly out of sync.
Can be seen here:
http://www.tiikoni.com/tis/view/image.php?id=23d3264
this is the css for the button:
.submitToDoButton {
background: lightgray;
font-size: 20px;
color: red;
padding: 2px;
width: 100px;
border-radius: 25px;
}
this is what I thought would be the code to change the border aka set it to the same radius:
.submitToDoButton:active{
border-radius: 25px;
}
but this does nothing
You could try outline: none; to the main button class:
.submitToDoButton{
border-radius: 25px;
outline: none; /* add this */
}
If you do want an effect similar to outline but to look good, you can use the box-shadow property.
You won't be able to solve this with border-radius and outline. To get the result you are looking for you need to make a box-shadow looking the same as the outline on :focus.
.submitToDobutton:focus {
box-shadow: 0 0 5px blue;
}
I am not sure about the outline color, but you'll probably have to change 'blue' to the correct color.
This question already has answers here:
CSS 3 slide-in from left transition
(6 answers)
Closed 8 years ago.
Please find this jsfiddle jsfiddle . When the screen size is less than 600px, the top menu bar is converted into responsive menu. When user hovers on "Menu" text (this text is used only for the demo), the menu appears. This works well on desktop and smartphones. Now I tried to implement slide right transition when user clicks on "Menu" text. I modified below css class
.nav ul:hover li{
display: block;
margin: 5px 0 0 0;
}
and add transition property. But it didn't work.
How do I make slide right responsive menu from css ???
This is not how i'd do it. You've to consider altering your HTML and CSS.
for example, the word menu is simply written in HTML, which is semantically incorrect and becomes a blocker while trying to animate the element, because you've to keep the text visible and deal with the rest of <li>, meaning this prevents you from being able to easily animate the <ul> altogether upon hovering menu. IMHO Menu should be a separate element.
However, to help you out with your current HTML and css, you can try something like this
.nav ul {
padding: 20px 0;
position: absolute;
top: 0;
left: 0;
background: url(../images/icon-menu.png) no-repeat 10px 11px;
width: 74px;
background-color: #5B9BD5;
z-index: 1000;
height:0px;
-webkit-transition:all 1s;
}
.nav li {
-webkit-transition:-webkit-transform 1s;
-webkit-transform:translate(-100%);
/* hide all <li> items*/
transform:translate(-100%);
margin: 0;
width:75px;
}
.nav ul:hover {
height:auto;
}
.nav ul:hover li {
display: block;
margin: 5px 0 0 0;
-webkit-transform:translate(0%);
transform:translate(0%);
}
JSFiddle
side note: above works in webkit browsers and latest browsers that doesn't require prefix for css3 transitions. remember to specify other browser prefixes to make it work cross browser