I have 3 divs and each should have a hover function to show text over the background image.
That works, sort of.... What is happening is when you hover over one all three show the text. How can I fix it so only the one being hovered over shows?
For the css
.circleBase {
border-radius: 50%;
width: 185px;
height: 185px;
border: 2px solid black;
background-color: #fff;
margin: 0 auto;
}
.c1 {
margin: 0 auto;
float: left;
height: 185px;
width: 185px;
background: url(../images/pencil2.png) no-repeat center center;
background-color: #fff;
border: solid red 1px;
}
.c2 {
margin: 0 auto;
float: left;
height: 185px;
width: 185px;
background: url(../images/up.png) no-repeat center center;
background-color: #fff;
border: solid red 1px;
}
.c3 {
margin: 0 auto;
float: left;
height: 185px;
width: 185px;
background: url(../images/email.png) no-repeat center center;
background-color: #fff;
border: solid red 1px;
}
.hidden1 {
font-size: 20px;
color: black;
display: none;
margin-top: 75px;
}
.hidden2 {
font-size: 20px;
color: black;
display: none;
}
.hidden3 {
font-size: 20px;
color: black;
display: none;
}
.full:hover .hidden1{
display: block;
}
.full:hover .hidden2{
display: block;
}
.full:hover .hidden3{
display: block;
}
For the html I have
<div class="full">
<div class="box"><div class="circleBase c1">Web Design</div></div>
<div class="box"><div class="circleBase c2">SEO Services</div></div>
<div class="box"><div class="circleBase c3">Contact Us</div></div>
</div>
Thanks for reading!
Jim
Make sure you qualify correctly which div is being hovered in the selector, something like this:
.box:hover a{display:inline; /*or any value except none */ }
You were probably using the .full class, or just div
Related
I'm trying to make a 'custom' progress bar with numbers at each end of the progress bar. Left hand number being the current value, and the right hand side being the max/target value. I've got it so that I'm showing the two numbers but I can't seem to position the right hand number correctly.
What I'm trying to achieve is...
and what I currently have is...
This is what I currently have code wise...
JSFiddle
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
float: right;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I've tried putting the the second span outside the the progress inner div but then moves the text outside the whole thing and I couldn't work out how to move it into the correct place.
Can anyone help?
I have an interesting solution using linear-gradients, its pretty close, try playing around with the margins and outline to get border right.
.progress-outer {
width: 96%;
display: flex;
height: 35px;
margin: 10px 2%;
text-align: center;
border: 1px solid #dcdcdc;
background-image: linear-gradient( 80deg, orange 37% , #f4f4f4 37% );
border-radius: 20px;
justify-content: center;
align-items: center;
}
.progressBarCurrent {
color: black;
text-align: left;
width: 50%;
position: relative;
margin: 0px;
margin-left: 20px;
}
.progressBarGoal {
color: black;
position: relative;
text-align: right;
width: 50%;
margin: 0px;
margin-right: 20px;
}
<div class="progress-outer">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
Instead of float:left you can use position:absolute
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
position: relative;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
position: absolute;
right: 5px;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I want to have my text in the middle. Since I added the element in the same line, the text offsets towards the right.
My code looks like this:
.property {
background-color: #497ba7;
color: #ffff;
text-align: center;
margin-left: 50px;
margin-right: 50px;
padding: 5px;
}
.navbtntop {
cursor: pointer;
float: left;
font-size: 20px;
background-color: #497ba7;
color: #fff;
border-color: rgba(0, 0, 255, 0.082);
border-radius: 3px;
text-decoration: none;
padding: 7px;
width: 20%;
text-align: center;
margin-left: 5.5%;
}
Previous
<h2 class="property">MDU Layout</h2>
Where is the problem then?
cols layout
Your idea (Keep the right col "center" to all wrapper area).
One way is by using one "empty" div (20% - 60% - 20%).
The other way is to add margin-right: 20%; for the right col.
.display_grid{
display: grid;
border: 2px solid orange;
grid-template-columns: 20% auto 20%;
}
.left {
border: 1px solid black;
display: block;
background-color: red;
padding: 20px;
color: #fff;
text-align: center;
}
.right {
background-color: blue;
color: #ffff;
text-align: center;
border: 1px solid red;
margin: 0px;
}
<div class="display_grid">
Left
<h2 class="right">Right</h2>
<div>
</div>
position absolute
One more way to achieve this is by position absolute (Old approach - but in your case, if the "left col" width/content change Maybe there is no choice).
Cons: less responsive + the text could overlap.
.relative_wrapper{
display: grid;
position: relative;
border: 2px solid orange;
grid-template-columns: 20% auto;
}
.left {
border: 1px solid black;
display: block;
background-color: red;
padding: 20px;
color: #fff;
text-align: center;
}
.right {
background-color: blue;
color: #ffff;
text-align: center;
border: 1px solid red;
margin: 0px;
/* position absolute */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="relative_wrapper">
Left
<h2 class="right">Right</h2>
<div>
</div>
https://medium.com/front-end-weekly/absolute-centering-in-css-ea3a9d0ad72e
When I hover over the button it changes as desired in terms of width, however the image is shifted towards the center. I want to keep it fixed on the left so that it doesn't shift over when the width of the button changes. Here is my code. I am building with React:
<div>
<button
className={
this.state.activecut === true
? "designstudiobuttonleftopactive"
: "designstudiobuttonlefttop"
}
onClick={this.cutActiveHandler}
>
<img src={shirtlogo} id="cutlogo" alt="" />
</button>
</div>
.designstudiobuttonlefttop {
width: 60px;
height: 60px;
margin-top: 150px;
display: block;
border: 1px solid #574904;
border-radius: 50%;
background-color: white;
color: #574904;
text-align: center;
margin-left: 50px;
}
.designstudiobuttonlefttop:hover {
background-color: #f2f2f2;
color: #574904 !important;
text-decoration: underline;
transition-delay: 100ms !important;
cursor: pointer !important;
width: 200px;
border-radius: 50px 50px 50px 50px;
}
#cutlogo {
width: 50px;
height: 50px;
padding-right: 5px;
}
.designstudiobuttonleftopactive {
color: #574904 !important;
border: none;
background-color: white;
text-align: center;
text-decoration: underline;
cursor: pointer;
margin-top: 100px;
display: block;
margin-left: 50px;
}
Try changing text-align: center; to text-align: left; (for both classes)
i am not familiar with react syntax but it can be achieved by putting button inside an additional div within same block.
yet there are many more ways to achieve it , also without using another div.
see an example
http://jsfiddle.net/wa2vht71/4/
Use float: left to keep it on the left side of the button.
.designstudiobuttonlefttop {
width: 60px;
height: 60px;
margin-top: 150px;
display: block;
border: 1px solid #574904;
border-radius: 50%;
background-color: white;
color: #574904;
text-align: center;
margin-left: 50px;
}
.designstudiobuttonlefttop:hover {
background-color: #f2f2f2;
color: #574904 !important;
text-decoration: underline;
transition-delay: 100ms !important;
cursor: pointer !important;
width: 200px;
border-radius: 50px 50px 50px 50px;
}
#cutlogo {
width: 50px;
height: 50px;
padding-right: 5px;
}
.designstudiobuttonleftopactive {
color: #574904 !important;
border: none;
background-color: white;
text-align: center;
text-decoration: underline;
cursor: pointer;
margin-top: 100px;
display: block;
margin-left: 50px;
}
<div>
<button
class="designstudiobuttonlefttop"
onClick={this.cutActiveHandler}
>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6vxI3cA6w8ocAr3KWNHdMmq5gkkhYSuacNYaFCrQxZmeBUo2m" id="cutlogo" alt="" width="40" height="40" style="float: left;"/>
</button>
</div>
Use flexbox, the following code sample keeps your image to the left regardless of your button width:
<div class="button">
<div class="imageContainer">
<img src="path/to/your/image" />
</div>
</div>
<style type="text/css">
.button {
display: flex;
justify-content: flex-start;
width: 100px;
}
.button:hover {
width: 200px;
}
.button .imageContainer {
height: 50px;
width: 50px;
align-self: center;
}
.imageContainer img {
height: auto;
width: 100%;
}
</style>
So I have the following code below.
.innerDiv1 {
display: inline-block;
width: 45%;
border-right: 1px solid;
padding-right: 5px
}
.innerDiv2 {
display: inline-block;
width: 45%;
padding-left: 5px;
}
.inner2 {
border: 1px solid black;
}
.rect {
width: 0%;
height: 20px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: black;
font-size: 12;
}
.sendreceiveBtn {
height: 25px;
width: 100%;
font-size: 12px;
max-height: 25px;
}
<div>
<div class="inlineItems" id="progBtnBar">
<div class="innerDiv1">
<div class="inner2">
<div id="myProgress">
<div class="rect">0%</div>
</div>
</div>
</div>
<div class="innerDiv2">
<button class=sendreceiveBtn>Transmit</button>
</div>
</div>
</div>
I need to line up a button vertically with another div, with both as inline-block inside another div, so they end up next to eachother, preferably the exact same size. However, something about the button is pushing it down a bit. Nothing I have done so far has been able to change this EXCEPT for increasing the font of the text in the button. What is making this space, and how can I get these to line up?
this is the culprit:
.rect {
line-height: 30px;
}
Vertical align allows multiple siblings to share the same vertical position.
.innerDiv1 {
display: inline-block;
width: 45%;
border-right: 1px solid;
padding-right: 5px
vertical-align: middle;
}
.innerDiv2 {
display: inline-block;
width: 45%;
padding-left: 5px;
vertical-align: middle;
}
You can see a working example in the following jsfiddle: https://jsfiddle.net/gkotxdt7/
Replace Your existing CSS with below:
.innerDiv1 { display: table-cell; width: 45%; border-right: 1px solid; padding-right: 5px; vertical-align: middle; }
.innerDiv2 { display: table-cell; width: 45%; padding-left: 5px; vertical-align: middle; }
.inner2 { border: 1px solid black; }
.rect { width: 0%; height: 20px; background-color: #4CAF50; text-align: center; line-height: 30px; color: black; font-size: 12; }
.sendreceiveBtn { min-height: 25px; width: 100%; font-size: 12px; height: auto; }
#progBtnBar{
display: table;
width: 100%;
height: auto; }
Thats it. It will resolve the issue.
I have attached an image showing my dropdown. The issue is that you can still see the text behind the dropdown. I want it to be deep blue so the text behind it can be hidden. How can I change this with CSS so that the background won't let me see the text behind it ?
As you can see on the image, ns can be seen through that dropdown. And last 12 months is kind of overlapped.
here is the CSS code of the tabs
.menu_button {
width: 19%;
height: 30px;
background: #1A3F73;
float: left;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
border: 1px solid black;
border-radius: 5px;
color: #f4f442;
font-weight: bold;
font-size: 13px;
}
.menu_button ul {
margin-top: 10px;
background: #1A3F73;
list-style-type: none;
width: 100%;
display: none;
margin-left: 0px;
background: rgba(128,128,128,0.7);
}
.menu_button li {
height: 30px;
background: #1A3F73;
margin: 0px;
width: 100%;
opacity: 1;
}
HTML
<a style='color:#f4f442;' href ='course/view.php?id=11'><div class ='menu_button'><span class='middle daily'>Daily Magic Spells</span><br /><div class='dd'><ul><li class='recent'><a style='color:#f4f442' href='recent.php'>Most recent leaders</a></li><li class='threem'><a style='color:#f4f442' href='three-month.php'>last 3 months</a></li><li class='sixm'><a style='color:#f4f442' href='six-month.php'>last 6 months</a></li><li class='twelvem'><a style='color:#f4f442' href='year.php'>last 12 months</a></li></ul></div></div></a>
You need to remove the opacity from your rgba background color
.test{
height: 100px;
width: 100px;
background-color: rgba(26,63,115, .5)
}
If you change the
background-color: rgba(26,63,115, .5)
to
background-color: rgba(26,63,115, 1)
It will remove the Opacity making the color solid
With your code change
.menu_button ul {
margin-top: 10px;
background: #1A3F73;
list-style-type: none;
width: 100%;
display: none;
margin-left: 0px;
background: rgba(128,128,128,0.7);
}
to
.menu_button ul {
margin-top: 10px;
background: #1A3F73;
list-style-type: none;
width: 100%;
display: none;
margin-left: 0px;
background: rgba(128,128,128,1);
}