I have 2 bordered space for tools and free-space (droppable-area). And this tool-space includes some shapes that can draggable, also droppable to free-space. But there is little bug...
When the figure drops to the free-space, some slide events happen. First of all, it happens after dropping any figure, then if we drag dropped figures, they affect each other with definite slides.
If you run below code on your computer and try this drop events you will understand my problem.
Any help would be greatly appreciated, thanks!
$(function() {
$( ".draggable-item" ).draggable({ revert: "invalid" });
$(".droppable-area").droppable({
drop: function(event, ui) {
$(this).append(ui.draggable);
}
});
} );
.tool-space{
border: 10px double #005580;
min-height: 608px;
}
.free-space{
border: 10px solid #005580;
min-height: 608px;
}
.doitcenter{
text-align: center;
}
.close-button{
font-size: 24px;
cursor: pointer;
}
.shapes{
opacity: 0.8;
margin-bottom: 10px;
}
.shapes:hover{
cursor: move;
opacity: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<script src="https://kit.fontawesome.com/6e2154b1f7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2">
<div class="tool-space">
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item">
<span onclick="this.parentNode.style.display = 'none';" class="close-button">×</span>
<i class="far fa-square fa-2x shapes"></i>
</span>
</div>
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item">
<span onclick="this.parentNode.style.display = 'none';" class="close-button">×</span>
<i class="far fa-circle fa-2x shapes"></i>
</span>
</div>
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item">
<span onclick="this.parentNode.style.display = 'none';" class="close-button">×</span>
<i class="far fa-square fa-2x shapes"></i>
</span>
</div>
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item">
<span onclick="this.parentNode.style.display = 'none';" class="close-button">×</span>
<i class="far fa-circle fa-2x shapes"></i>
</span>
</div>
</div>
</div>
<div class="col-10">
<div class="free-space droppable-area">
</div>
</div>
</div>
</div>
</body>
</html>
Largely the issue is that when the item is Dropped, Draggable has assigned top and left CSS values to the item. I suspect some other CSS is causing this to work based off some relative position inside the free-space.
You might consider using UI .position() to correct this.
$(function() {
$(".doitcenter").draggable({
revert: "invalid",
handle: ".shapes"
});
$(".droppable-area").droppable({
drop: function(event, ui) {
ui.draggable.appendTo(this).position({
my: "center center-5",
at: "center",
of: event
});
}
});
$(".free-space").on("click", ".close-button", function(e) {
$(this).closest(".doitcenter").remove();
});
});
.tool-space {
border: 10px double #005580;
min-height: 608px;
}
.free-space {
border: 10px solid #005580;
min-height: 608px;
}
.free-space .doitcenter {
width: 40px;
}
.doitcenter {
text-align: center;
}
.close-button {
font-size: 24px;
cursor: pointer;
}
.shapes {
opacity: 0.8;
margin-bottom: 10px;
}
.shapes:hover {
cursor: move;
opacity: 1;
}
<script src="https://kit.fontawesome.com/6e2154b1f7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<div class="row">
<div class="col-2">
<div class="tool-space">
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item"><span class="close-button">×</span><i class="far fa-square fa-2x shapes"></i></span>
</div>
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item"><span class="close-button">×</span><i class="far fa-circle fa-2x shapes"></i></span>
</div>
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item"><span class="close-button">×</span><i class="far fa-square fa-2x shapes"></i></span>
</div>
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item"><span class="close-button">×</span><i class="far fa-circle fa-2x shapes"></i></span>
</div>
</div>
</div>
<div class="col-10">
<div class="free-space droppable-area">
</div>
</div>
</div>
</div>
See More: https://jqueryui.com/position/
Related
I want to put hover into the element inside the sidebar that I already have.
I try to use hover ,but it seems not working. I appreciate every answer.
.sidebar .navbar .nav-link:hover{
color: #EFDBFF;
display: block;
background: white;
border-color: #EFDBFF;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header class="header row ">
<div class="d-flex justify-content-between">
<div id="logo" class="pb-2 ps-2 pe-0 col-2">
<img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
</div>
</header>
<div class="body row ">
<div class="sidebar col-2 " id="sidebar">
<!--sidebar start-->
<div class="navbar-nav w-100">
<div class="nav-item dropdown">
<i class="fa fa-laptop me-2"></i>Admin
<div class="dropdown-menu bg-transparent border-0">
A
B
C
</div>
</div>
<i class="fa fa-th me-2"></i>Cập nhật PO
<i class="fa fa-keyboard me-2"></i>Phân loại PO
<i class="fa fa-chart-bar me-2"></i>Ước tính rebate
<i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate
<i class="fa fa-tachometer-alt me-2"></i>Báo cáo
<i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin
<i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng
</div>
<!--sidebar end-->
</div>
<div class="content col-10"> Content
</div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>
your css selector is wrong
this will solve your problem
.sidebar .navbar-nav .nav-link:hover{
color: #EFDBFF;
display: block;
background: white;
border-color: #EFDBFF;
}
Is your css code connected to html?
Maybe nav-item class overrides. Use nav-link class with !important
More information: https://www.w3schools.com/css/css_important.asp
I see your selector is incorrect.
On your html you have navbar-nav so you'll have to use .navbar-nav on your selector.
your html
...
<!--sidebar start-->
<div class="navbar-nav w-100">
...
so the updated selector is
.sidebar .navbar-nav .nav-link:hover
.sidebar .navbar-nav .nav-link:hover{
color: #EFDBFF;
display: block;
background: white;
border-color: #EFDBFF;
}
That will solve the problem.
I have a simple navigation for resolution less than 757px I used bootstrap and pure JavaScript
if i resize my desktop browser it works but in mobile browser it doesn't work, even on fiddle it works but in real mobile browser it doesn't work(i have uploaded project to server)
now it doesnt work on desktop either i cant remove d-none class for links
html code
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<header>
<div class="clearfix mx-3 my-2 d-md-none">
<label class="float-left">
<i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="show()"></i>
<i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="hide()"></i>
</label>
</div>
<div id="my-menu">
<ul class="list-unstyled d-none" id="links">
<p>واحدها<p>
<p> محصولات</p>
<p> <a href="/pages/درباره-ما"
class="text-white">درباره ما</a></p>
<p> اخبار</p>
<p> ارتباط با ما</p>
</ul>
</div>
</header>
</body>
</html>
css
#my-menu{
position: relative;
}
#links{
position: absolute;
padding: 30px 25px;
border-radius: 7px;
background-color: #3CB371;
text-align: center;
color: white;
transition:all .5s ease;
z-index: 10;
}
javascript
function show() {
document.getElementById("links").classList.toggle('d-none');
document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
function hide() {
document.getElementById("links").classList.toggle('d-none');
document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
here is the jsfiddle link
thank you in advance
I've changed your code little bit. jsfiddle working demo
HTML
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
</head>
<body>
<header>
<div class="clearfix mx-3 my-2">
<label class="float-left d-none">
<i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="toggle()"></i>
<i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="toggle()"></i>
</label>
</div>
<div id="my-menu">
<ul class="list-unstyled" id="links">
<li>
واحدها
<p></p>
<p>محصولات</p>
<p>درباره ما</p>
<p>اخبار</p>
<p>ارتباط با ما</p>
</li>
</ul>
</div>
</header>
</body>
</html>
js
const navIcon = document.querySelector('.float-left')
const menu = document.querySelector('#my-menu')
const signOne = document.getElementById('sign-one');
const signTwo = document.getElementById('sign-two');
function toggle() {
signOne.classList.toggle('d-none');
signTwo.classList.toggle('d-none');
menu.classList.toggle('d-none')
}
function responsive(e) {
if (window.innerWidth < 757) {
navIcon.classList.remove('d-none')
menu.classList.add('d-none')
// If sign-two not hidden then menu shown on less then 757px screen
if (!signTwo.classList.contains('d-none')) {
menu.classList.remove('d-none')
}
} else {
navIcon.classList.add('d-none')
menu.classList.remove('d-none')
}
}
window.addEventListener('resize', responsive);
window.addEventListener('load', responsive);
Remove d-md-none from <div class="clearfix mx-3 my-2 d-md-none">
We created a custom accordion library that will toggle the .content element based on what is clicked similar to jQuery accordion. Next to the .header element we are displaying a fontawesome plus icon. I am running into issues where the content will hide and show, but the icon will not switch.
How can i get the content element and icons to switch?
Current issue:
Desired output:
$(function() {
$('.header').on('click', function() {
var hdr = $(this);
var grandParents = hdr.parent().parent();
grandParents.find('.item.active').removeClass('active');
grandParents.find('.content').stop().slideUp().removeClass('active');
hdr.closest('.item').find('.content').stop().slideToggle();
hdr.parent().toggleClass('active');
});
});
.content {
display: none;
}
.item.active > .content {
display: block;
}
.item.active > .header {
color: white;
background-color: black;
}
.header {
padding: 16px;
margin: 8px;
background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>First link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>second link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>third link</span>
</h3>
<div class='content'> Some more content </div>
</div>
</div>
I have updated your js code, please check. The general concept of my update is, in every click, the icon is removed and replaced with a new but different one (from plus to minus and vice versa).
The problem on this is that the use of fontawesome icons. But anyways, take a look on my code.
Here's the full working code. The only update I have is the js part.
$(function() {
$('.header').on('click', function() {
var hdr = $(this);
hdr.siblings('.content').slideToggle();
hdr.parent().toggleClass('active');
hdr.parent().siblings().find('.content').slideUp();
hdr.parent().siblings().removeClass('active');
if(hdr.parent().hasClass('active')) {
hdr.parent().find('svg').remove();
hdr.parent().siblings().find('svg').remove();
hdr.prepend('<i class="fas fa-minus"></i>');
hdr.parent().siblings().find('.header').prepend('<i class="fas fa-plus"></i>');
} else {
hdr.parent().find('svg').remove();
hdr.prepend('<i class="fas fa-plus"></i>');
}
});
});
.content {
display: none;
}
.item.active > .content {
display: block;
}
.item.active > .header {
color: white;
background-color: black;
}
.header {
padding: 16px;
margin: 8px;
background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>First link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>second link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>third link</span>
</h3>
<div class='content'> Some more content </div>
</div>
</div>
We had same kind of requirement, where we had to replace the + icon of each accordion item with dynamic icon specific to the accordion content, like
1st Accordion - a.png
2nd accordion - b.png and so on.
I did it by adding an image to the Accordion Item page content template and assign it to the cloned accordion rendering.
In the code shown below, I have a post and in there is a comment button that will slide the comment box into view from the right. I'm resizing the main post element from 100% of the parent to 67% of the parent (col-lg-12 to col-lg-8). Although I'm trying to get the post element to simultaneously move with the entrance of the comment element.
Also in my fiddle i can't seem to fix how the comment slides all the way across the entire post element, rather than just a portion of it. Additionally, I can't fix the animation where it just appears rather than slides in, although the slide out animation works.
This is my JSFiddle
The code snippet below oddly doesn't work like jsfiddle does.
$('body').on('click', '#comments', function(e) {
var name = $(this).attr('name');
var style = $("#comments-body-" + name).prop('class');
if (style == "col-lg-4 hide") {
$("#post-card-" + name).prop('class', 'col-lg-8');
$("#comments-body-" + name).show("slide", {
direction: "right"
}, 1000, function() {
$("#comments-body-" + name).prop('class', 'col-lg-4 show');
});
} else if (style == "col-lg-4 show") {
$("#comments-body-" + name).hide("slide", {
direction: "right"
}, 1000, function() {
$("#post-card-" + name).prop('class', 'col-lg-12');
$("#comments-body-" + name).prop('class', 'col-lg-4 hide');
});
}
});
.quantity {
border-radius: 100px;
background: #dc3545;
color: white;
padding: 1px 6px;
}
span #comments {
cursor: pointer;
}
span #comments:hover {
color: blue;
}
.divider {
position: relative;
Float: left;
height: 100%;
width: 1px;
background-color: rgba(0, 0, 0, .125)
}
.comment-body {
padding: 0.75rem !important;
}
.show {
display: block;
}
.hide {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" media="all">
<link href="https://nofile.io/f/RA9FgtoD8yG/master.css" rel="stylesheet" media="all">
<body>
<div id="main-content" class="main-content">
<div id="notices" class="section__content section__content--p30">
<div class="container-fluid" id="content">
<div class="col-md-12">
<div class="overview-wrap">
<h2 class="title-1">Notices</h2>
<button class="au-btn au-btn-icon au-btn--blue" data-toggle="modal" data-target="#newPostModal">
<i class="zmdi zmdi-plus"></i>new post</button>
</div><br />
<div id="$id" class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-lg-8">
<strong class="card-title">
yeet
</strong>
</div>
<div class="col-lg-4">
<span style="cursor:pointer;" class="float-right">
<a id="remove-notice">
<i class="fas fa-times"></i>
</a>
</span>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<span>
<small><span class="float-right" id="comments" name="1">Comments <span class="quantity"><bold>1</bold></span></span>
</small>
</span>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div id="post-card-1" class="col-lg-12" style="position:relative;">
xdxddxd
</div>
<div class="col-lg-4 hide" id="comments-body-1">
<div class="divider"></div>
<div style="margin-left:2vw;">
<div style="vertical-align:middle;">
<strong>Comments</strong>
<button class="au-btn au-btn-icon au-btn--blue" style="line-height:25px!important;padding:0 5px!important;float:right;"><i class="zmdi zmdi-plus"></i>comment</button>
</div>
<br />
<div class="card">
<div class="card-body comment-body" style="position:relative;">
<strong> User </strong><br/>
<p>
shfashfihgliahgal
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Okay, I hope you are still watching this question.
First, why your show("slide" is failed. Let's watch this code.
$(function() {
$("#button1").on("click", function() {
// fade in. (but it doens't show due to priority problem.)
$("#target1").fadeIn("slow", function() {
// It shows at this timing.
$("#target1").prop("class", "col-sm-4 show");
});
});
$("#button2").on("click", function() {
// fade in.
$("#target2").fadeIn("slow");
});
});
.hide {
display: none !important;
}
.display-none {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target1" class="col-sm-4 hide">
Hello my name is col-sm-4! for display:none !important;
</div>
<div id="target2" class="col-sm-4 display-none">
Hello my name is col-sm-4! for display:none;
</div>
<input type="button" class="button" value="show col-sm-4" id="button1">
<input type="button" class="button" value="show col-sm-4" id="button2">
Next, you want to move the entire post element.
Maybe I'm misunderstanding.
But I did fix some problem that what I thought.
Can you have a look? if anything, feel free to question me.
For Example.
I want to show different color to glyph icon on hover.
This is my code:
<div class="col-xs-3 col-lg-3 text-center span-hover" style="height:50px;border-right: 1px solid #fff;" data-target="#myCarousel" data-slide-to="1">
<span class="glyphicon glyphicon-globe"></span>
<span class="hidden-xs"> TRADING</span>
</div>
css
.span-hover:hover {
background-color: rgba(0,0,0,0.4);
color:white;
}
.glyphicon
{
font-size: 25px;
color:red;
}
.glyphicon:hover
{
color:#44c5ff;
}
When user place the cursor on div tag,Now it's only changing text color.But I want to change text color:white and at the same time glyph icon color:#44c5ff;
.glyphicon:hover it's working when user exactyly place cursor on glyphicon. But not in div tag.
Thanks
<!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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.glyphicon:hover{
color:#44c5ff;
font-size:30px;
}
</style>
</head>
<body>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#">
<span class="glyphicon glyphicon-envelope"></span>
</a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>
</body>
</html>
Try It Once
.span-hover:hover {
background-color: rgba(0,0,0,0.4);
color:white;
}
.glyphicon
{
font-size: 25px;
color:red;
}
.glyphicon:hover
{
color:#44c5ff;
}
.span-hover:hover .glyphicon{
color:#44c5ff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-3 col-lg-3 text-center span-hover" style="height:50px;border-right: 1px solid #fff;" data-target="#myCarousel" data-slide-to="1">
<span class="glyphicon glyphicon-globe"></span>
<span class="hidden-xs"> TRADING</span>
</div>
try this snippet. and you can use this type of hover
.span-hover:hover .glyphicon{
color:#44c5ff;
}