I was looking for the solution over stackoverflow, but didn't find anything.
I have a set of icons. By default they're grey and only 4 out of 7 are visible.
When I hover on div with icons I want 7 of 7 to be visible and grey.
And while hovering them, I want every separate icon, that is hovered, to be changed with the same icon of different color ( I have 2 different SVGs for every icon - grey and blue one)
.card-list .social span img {
height: 13px;
margin-top: -2px;
}
.card-list .social:hover>.hidden {
display: inline;
}
.card-list .social:hover>.visible {
display: none;
}
.card-list .social .hidden span:hover {}
<div class="align-self-center social col-8 col-md-2 px-0">
<div class="visible mx-0 px-0">
<span class="visible"><img src="images/email-normal.svg"></span>
<span class="visible"><img src="images/telegram_normal.svg"></span>
<span class="visible"><img src="images/twitter_normal.svg"></span>
<span class="visible"><img src="images/facebook-normal.svg"></span>
</div>
<div class="hidden mx-0 px-0">
<span class=""><img src="images/more_normal.svg"></span>
<span class=""><img src="images/email-normal.svg"></span>
<span class=" "><img src="images/telegram_normal.svg"></span>
<span class=""><img src="images/phone-normal.svg"></span>
<span class=""><img src="images/twitter_normal.svg"></span>
<span class=""><img src="images/facebook-normal.svg"></span>
<span class=""><img src="images/bitcoin_normal.svg"></span>
</div>
</div>
So if I write something in the last selector it screws up in html on hover, as I guess one hover overlays other and it goes wild)
Will be happy for any suggestions (JS and JQuery too), because I am a little bit puzzled)
You shouldn't use seperate DIV elements for this. Instead, you can simply use a single div element and show / hide the icons on hover. I don't have your images here, so I'll just use Google's Material Icons to show you an example:
.hidden {
display: none;
}
.icons:hover .hidden{
display: inline;
}
span:hover {
color: red;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class='icons'>
<span><i class="material-icons">accessibility</i></span><br/>
<span><i class="material-icons">face</i></span><br/>
<span class='hidden'><i class="material-icons">android</i></span><br/>
<span class='hidden'><i class="material-icons">autorenew</i></span>
</div>
The span elements with class hidden will be shown when the div is hovered. When you hover an icon, its color will be changed to red. The same idea would apply to your images. Instead of using <img/> elements, use <div/> elements and use CSS to set the image as the background of that div. That will allow you to use CSS to set the background image to another one on hover.
Related
I have 4 divs with a more-info button on the bottom of each, like so:
http://codepen.io/anon/pen/VpVbPq
And when a user presses ' more info ' I would like for it to extend to the bottom and show extra info, obviously.
The problem is under the more-info div, text is seen, but what if I want to hide whats under it, even if its opacity is 0.6 ?
I thought it would've been the best if I draw what I need, so here:
Codepen code below:
html
<body>
<div class="wrapper">
<div class="info">
<p>
dummy text
</p>
<div class="more-info">more info</div>
</div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
</div>
</body>
css
.wrapper {
width: 1045px;
margin: 0 auto;
}
.info {
width: 500px; height: 200px;
background-color: #1A5AB6;
display: inline-block;
margin: 10px;
position: relative;
font-size: 20px;
overflow: hidden;
}
.more-info {
width: 100%; height: 40px;
background-color: #0C1B44;
bottom: 0; left: 0;
display: inline-block;
position: absolute;
font-size: 20px;
color: white;
line-height: 35px;
text-align: center;
opacity: 0.6;
}
.more-info:hover {background-color: #010716;}
In order to have the text expand, you can use a little jQuery to set the height to automatically adapt to however much text there is, and hide the 'more info' button entirely:
$(".more-info").on("click", function() {
$(this).css("opacity", "0");
$(this).parent().css("height", "auto");
});
With regards to not having the text visible behind the 'more info' button, you would need to set the opacity to 1:
.more-info {
opacity: 1;
}
This naturally distorts the colour a little, but you can always change the background colour and hover colour to cover this.
I've created an updated pen showcasing this here.
Hope this helps! :)
change your class selector definition as shown below:
.more-info {
width: 100%; height: 20%;
background-color: #0C1B44;
font-size: 20px;
color: white;
display: block;
text-align: center;
opacity: 0.6;
}
Then add this css for your paragraph element:
p {
height: 75%;
overflow: hidden;
margin: 5px;
}
Your question: "what would be the best way to make a sort of drop-down-more-info div?"
There is a built in function in Boot Strap that allows you to use a "data" class that does all the crunching for you. Just call on their css and js files externally or host on your server. Familiarize yourself with their data classes and call on their css/js classes to simplify previously arduous coding, like revealing a hidden DIV on click!
Note the data-toggle="collapse" and data-target="#more_info" lines in my div that holds the span tag that is the control for revealing the hidden <div id="more_info">:
`<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>`
Then note the class in my hidden div. Note the id of the hidden div and the data-target #more_info. This can be used for classes as well, ie: .more_info. Everything is explained in more detail at bootstrap Github or their official site: http://getbootstrap.com/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="info">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>
<div id="more_info" class="collapse">Some hidden infomration you ony want to be seen when the user click on the control link.</div>
</div>
or add three divs floating perfectly without all the css, each with drop downs more info.
<body>
<div class="wrapper row">
<div class="col-md-4">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span> </div>
<div id="more_info" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.
</div>
</div>
<div class="col-md-4">
<p>
Some other information we want to have a hidden drop down with more info for.
</p>
<div data-toggle="collapse" data-target="#more_info2">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info2" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.</div>
</div>
<div class="col-md-4">
<p>
Yet another div with info that has a drop down menu for more info included below.
</p>
<div data-toggle="collapse" data-target="#more_info3">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info3" class="collapse">
Some hidden infomration you ony want to be seen when the user click on the control link.
</div>
</div>
Best of luck.
I have am problem with the styling of my navbar with semantic-ui. I like to change the color and background-color on hover and change the focus. But everything I do it just does not change the hover. I was only able to do it with jQuery, but that should not be the solution for this problem.
This is the code I use for that part:
$(document).ready(function() {
$('.main.menu').visibility({
type: 'fixed'
});
})
;
a.nav.item:hover {
background: #1B1C1D;
color: #17AA1C;
}
<div class="ui borderless inverted stackable main menu">
<div class="ui text container">
<div href="#" class="header item">
<i class="code icon" id="myicon"></i>
Name
</div>
Me
Current Projects
Blog
Contact
</div>
</div>
The style you want to override is chained with the .inverted class.
This will work for example.
.ui.inverted.menu .dropdown.item:hover,
.ui.inverted.menu .link.item:hover,
.ui.inverted.menu a.item:hover,
.ui.link.inverted.menu .item:hover {
background: #1B1C1D;
color: #17AA1C;
}
jsbin https://output.jsbin.com/yijowusiqe
I have a series of "icons" that I show in my template.
<div ng-repeat="data in items | orderBy:'-timestamp'">
<div class="icon">
<i>1</i>
<span>2</span>
</div>
</div>
I have the following css to show span when .icon is hovered over and hide i.
.icon:hover i { display: none; }
.icon:hover span { display: block; }
However, I also want to be able to show every single instance of span when $scope.options == true. So I added the following:
<i ng-hide="options">1</i>
<span ng-show="options">2</span>
But now, my :hover is broken and doesn't end up showing the span.
Is there a way to override the ng-show so that my css will still display:block when it is hovered?
plunker
You can skip the css and let angular handle it using ng-mouseenter/ng-mouseleave. Then use an or to have it show when a second variable goes true.
HTML:
<div ng-repeat="data in items | orderBy:'-timestamp'">
<div ng-mouseenter="options=true" ng-mouseleave="options=false" class="icon">
<i ng-hide="options || checkbox">1</i>
<span ng-show="options || checkbox">2</span>
</div>
</div>
<input type='checkbox' ng-model="checkbox" ng-click="options=!options">Show
use the $scope.options value to add a class to your .icon div, then make a more specific CSS rule to overrride the :hover event.
<div class="icon" ng-class="{ override: $scope.options == true }">
<i ng-hide="options">1</i>
<span ng-show="options">2</span>
</div>
And in your CSS:
.icon.override:hover i { display: block; }
.icon.override:hover span { display: block; }
I want to have an arrow pointing to the right to allow the user to expand the sidebar, and then change that glyphicon to point to the left. That way, it points to the left so that they understand how to hide the sidebar. I then want it to change back to its default state.
This is what I have currently:
<div id="page-content-wrapper">
<div class='hidden-lg'>
<div class="content-header">
<h1>
<a id="menu-toggle" href="#" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></a>
</h1>
</div>
</div>
Just use:
$('#menu-toggle').click(function(){
$(this).find('i').toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-arrow-left');
});
Fiddle Example
Try
$('#menu-toggle').on('click', function(){
var iSelector = $(this).find('i:first');
if(iSelector.hasClass('glyphicon-arrow-right')) {
iSelector.removeClass('glyphicon-arrow-right')
iSelector.addClass('glyphicon-arrow-left')
}
});
Fiddle
Reference:
selectors
on
hasClass
removeClass
addClass
I guess there is a better way to address this common problem is using CSS's pseudo classes like
:after
For example
.panel-heading .accordion-toggle:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
transition: transform 0.5s;
transform-origin: 8px 7px;
}
And below code for rotating glyphicon
.panel-heading .accordion-toggle.collapsed:after {
transform: rotateZ(180deg);
}
Please note: font-family and content may be different if you are using other than bootstrap css library. Also pay attention to the classes decorated or used for your panel.
Reference
I'm trying to put over a leaflet map a bootstrap row, my html is:
<div class="row-fluid some" id="map">
<div class="span1"></div>
<div class="span2"></div>
</div>
span1 and span2 are columns with some information with rgba background. the leftover columns are a visible map area.
The problem is the map is showing over the columns and they are visible only when map is loading or zooming out.
span1 and span2 have z-index: 2000
How to I can put columns visible over the map?
You can put them in a common container, and absolutely position the row you want to overlay the map.
demo (with Leaflet)
<div class="container-fluid">
<div class="mapbox">
<div class="row-fluid some" id="map">
<img src="//placehold.it/600x400">
</div>
<div class="row-fluid overlay">
<div class="span1">
<button class="btn btn-primary">Button</button>
</div>
<div class="span2">
<button class="btn">Button</button>
</div>
</div>
</div>
</div>
.mapbox {
position: relative;
}
.mapbox .overlay {
position: absolute;
top: 0;
left: 0;
z-index: 314159;
pointer-events: none;
}
.mapbox .overlay .btn {
pointer-events: initial;
}
Clicking through an element is possible by specifying pointer-events: none. Note that this by default removes the ability to click children of said element (because the default pointer-events value is inherit), so declare pointer-events: initial on those elements you want to be able to interact with.
note: the reason the buttons are stacking on the fiddle is Bootstrap's media queries, are seeing the small preview as a mobile-phone size.