Title says it all; my css:
a.menu:hover {
opacity: 1;
text-shadow: 0 0 10px white;
}
a.menu:hover ~ .dropdown {
display: block;
}
.dropdown {
display: none;
width: 50px;
height: 50px;
position: absolute;
top: 120px;
left: 120px;
background: red;
}
HTML:
<p class="left_topbar">
<img src="css/img/logo.png">
Games ▾
</p>
<div class="dropdown"></div>
Why does the .dropdown now get visible when hovering over the menu link?
Actually your h2 is not a child of h1 tag. You have to use sibling operator(+) to achieve this.
h1:hover + h2{
display: block;
}
The above solution will point the next immediate sibling element. If you want to target all the elements then use the ~ operator.
h1:hover ~ h2{
display: block;
}
EDIT:
Based on your edit, Looks like you have to change the order like below.
a.menu:hover {
opacity: 1;
text-shadow: 0 0 10px white;
}
.dropdown {
display: none;
width: 50px;
height: 50px;
position: absolute;
top: 120px;
left: 120px;
background: red;
}
a.menu:hover ~ .dropdown {
display: block;
}
HTML
<div class="left_topbar">
<img src="css/img/logo.png">
Games ▾
<div class="dropdown"></div>
</div>
You want to change
>
to
+
As the arrow is a descendant selector whereas the plus is a sibling selector.
Related
Is there a way to position an img separately from the source (text) in an anchor element? For instance, in the picture, I want the word "dot" to be aligned further right than the arrow but stay on top of the arrow.
current
what I want
I know I could make them as separated anchors but I want the color of the word to change when you hover on the arrow as well and if they are separate, the a:hover doesn't work together.
I tried changing the position under .left img to be different but it moves the img and the source.
HTML code:
<span class="leftarrow">
dot<img src="images/leftarrow.png">
</span>
CSS code:
.leftarrow {
position: absolute;
left: 0;
top:0;
}
.leftarrow a{
position: absolute;
left: 0;
font-size: 1.5em;
color:gray;
text-decoration: none;
}
.leftarrow a:hover{
color: black;
}
.leftarrow img{
position: absolute;
left: 0;
top: 15px;
width: 50px;
}
Try this, using Pseudo-Elements. It could definitely be more optimized than this though.
a {
margin-left: 100px;
}
span:after {
content: "";
background-image:url('https://www.flaticon.com/svg/static/icons/svg/271/271218.svg');
display: inline-block;
background-size: 30px 30px;
height: 30px;
width: 30px;
position: absolute;
z-index: 1;
left:90px;
top: 15px;
}
a:hover {
color: red;
}
<a href="#">
<span>dot</span>
</a>
First: wrap the dot into a <span> or <div> for better control,
Second: use a more powerfull display mode (e.g: flex or grid)
here is a sample:
a {
vertical-align: middle;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-end;
color: black;
width: fit-content;
margin: 0 auto;
}
a:hover {
color: red;
}
div {
font-size: 32px;
}
img {
width: 100px;
}
<a href="#">
<div>dot</div>
<img src="https://www.flaticon.com/svg/static/icons/svg/271/271218.svg" />
</a>
I have a dropdown, when I expand it, it's item and existing controls are getting mixed. I want to hide bg items completely and Dropdown going inside another divs. This is my code
dropdown.component.css
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
min-width: 18em;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent.active>span>ul {
display: block;
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 18em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
dropdowncomponenet.html file
<ul #dropdown [ngClass]="isChild ? 'child' : ''">
<li class="parent" *ngFor="let item of items" (click)="open(item)" [ngClass]="item.isOpen ? 'active' : ''">
{{item.name}}
<span class="expand" *ngIf="item.children.length > 0"> ❯</span>
<span dropdown *ngIf="item.children.length > 0 && item.isOpen" [items]="item.children" isChild="true"></span>
</li>
</ul>
Screenshot before and after expanding dropdown. Sorry for not providing images clear
Issue has bee fixed by adding two atribute in css style .parent
position: relative;
z-index: 10000;
I'm working on a sidebar menu and want it to be partially collapsing, which means I have to show text on hover and hide the text when not hovering. I know another question has been asked about changing another element's property on hover, but I'm having trouble changing itself and another property.
General HTML layout:
.sidebar {
position: fixed;
top: 0;
left: 0;
background-color: #1d326b;
height: 100%;
width: 60px;
transition: 0.3s;
border-radius: 0 5px 5px 0;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
.sidebar:hover > .text {
display: block; /*Supposed to display text*/
width: 150px; /*Expands the sidebar*/
}
<div class="sidebar">
<!--more containers...-->
<!--text below is deeply nested-->
<p class="text">Displayed Text</p>
</div>
Is there a pure css solution to this problem? Any help would be appreciated!
I think what you are trying to achieve is the animation for the width, if that's what you want just remove > .text from the hover selector:
.sidebar {
position: fixed;
top: 0;
left: 0;
background-color: #1d326b;
height: 100%;
width: 60px;
transition: 0.3s;
border-radius: 0 5px 5px 0;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
color: #FFF;
}
.sidebar:hover {
display: block; /*Supposed to display text*/
width: 150px; /*Expands the sidebar*/
}
.text {
width: 150px;
display: none;
}
.sidebar:hover .text {
display: block;
}
<div class="sidebar">
<!--more containers...-->
<!--text below is deeply nested-->
<p class="text">Displayed Text</p>
</div>
Would doing something like this be what you're looking for?
.text{
display: none;
}
.sidebar:hover > .text {
display: block; /*Supposed to display text*/
width: 150px; /*Expands the sidebar*/
}
.sidebar .text {
visibility: hidden;
}
.text:hover {
display: block;
width: 150px;
}
I have 25 images all together.
Can I somehow use a loop in order to make things easier for myself. I do not want to repeat the same code again and again like I have done below.
span.boxer1 {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 300px;
left: 0;
position: absolute;
top: 0;
width: 275px;
opacity: 0;
}
span.boxer1 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.boxers li:hover span.boxer1 {
opacity: 1;
}
span.boxer2 {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 300px;
left: 0;
position: absolute;
top: 0;
width: 275px;
opacity: 0;
}
span.boxer2 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.boxers li:hover span.boxer2 {
opacity: 1;
}
span.boxer3 {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 300px;
left: 0;
position: absolute;
top: 0;
width: 275px;
opacity: 0;
}
span.boxer3 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.boxers li:hover span.boxer3 {
opacity: 1;
}
span.boxer4 {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 300px;
left: 0;
position: absolute;
top: 0;
width: 275px;
opacity: 0;
}
span.boxer4 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.boxers li:hover span.boxer4 {
opacity: 1;
}
You know You can use multiple styles in one element?
<div id="myid1needforsomethingelse" class="liketable300 topalign myfont14">
<span class="mypadding2 mymargin3 myheadersbig"> content </span>
</div>
<div id="myid2needforsomethingelse" class="liketable300 topalign myfont12">
<span class="mypadding2 mymargin3 mycontentmedium"> content </span>
</div>
So just divide your css that repeat in classes and just use in repeat, I could be easier than writing style for each and any div/span and under-div and under-span out there :D
A 'class' can be used on multiple elements to apply the same CSS rules to each element.
An 'ID' is a unique identifier that should only be used on one element.
In your case you want to add a class to each of your elements and set your CSS rules on that class so that they will be applied to each element e.g.
.myclass {
background: #000;
}
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
In the above example the rule set in the CSS for .myclass will be applied to all four elements.
First of all - as far as I can tell there is no difference in these classes, so you could just use a common class for all of them and set the styling once.
That said, if you are using some script to loop to create the images, presumably they are also in some form of other container, in which case you could use an nth child designation in the CSS if you need to differentiate.
div.boxercontainer:nth-child(1) {
display: table-cell;
text-align: center;
vertical-align: middle;
}
You can write common css rules for some selector with comma like :
span.boxer1, span.boxer2 {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 300px;
left: 0;
position: absolute;
top: 0;
width: 275px;
opacity: 0;
}
span.boxer1 span, span.boxer2 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.boxers li:hover span.boxer1, ul.boxers li:hover span.boxer2 {
opacity: 1;
}
In case you need to set different css for example for span.boxer1, you can write this :
span.boxer1 { width : 300px;} // in this case the latest css-rule will be applied to element, so width:300 will override width:250 which are upper in css file
This should override existing common css https://jsfiddle.net/q83ojcbq/
Or like #Bri.H. already answer You can use same rules(css-classes) for different elements
I'm building out a tooltip feature for our site, it's what should be a simple highlight over an icon image and some text appears next to it. the problem I'm having is the words that should be inside of that tooltip bubble breaks into a new line for each. when the code is on its own it works fine.
ul { list-style-type: none; margin: 0; }
li { width: 50px; height: 50px; background: #000; color: #fff; position: relative; }
li:hover { background: #eee; color: #000; }
li:hover #z { display: block; }
#z { position: absolute; left: 50px; height: 50px; background: orange; color: #fff; display: none; }
<ul>
<li>
<div id="z">
some word that shouldn't break
</div>
</li>
</ul>
http://jsfiddle.net/emqLnmo8/1/
Use white-space: nowrap; to stop the words from wrapping.
So with your example: fiddle.