Change color on hover is not working properly
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I want to change the gray color to a black color on mouse hover as it is on the image:
But its not working properly, its working like this "https://jsfiddle.net/83vnj5ru/5/", the search input border is not treated as a whole, the placeholder text color is not changing on hover and the cursor pointer is not appearing on hover the Filter 1 and Filter 2 dropdowns. Do you know why?
.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i {
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover {
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover {
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
}<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>html css
edited Nov 23 '18 at 18:34
j08691
168k20199215
asked Nov 23 '18 at 18:31
user10676579user10676579
685
add a comment |
0
I want to change the gray color to a black color on mouse hover as it is on the image:
But its not working properly, its working like this "https://jsfiddle.net/83vnj5ru/5/", the search input border is not treated as a whole, the placeholder text color is not changing on hover and the cursor pointer is not appearing on hover the Filter 1 and Filter 2 dropdowns. Do you know why?
.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i {
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover {
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover {
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
}<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>html css
edited Nov 23 '18 at 18:34
j08691
168k20199215
asked Nov 23 '18 at 18:31
user10676579user10676579
685
add a comment |
0
0
0
I want to change the gray color to a black color on mouse hover as it is on the image:
But its not working properly, its working like this "https://jsfiddle.net/83vnj5ru/5/", the search input border is not treated as a whole, the placeholder text color is not changing on hover and the cursor pointer is not appearing on hover the Filter 1 and Filter 2 dropdowns. Do you know why?
.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i {
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover {
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover {
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
}<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>html css
edited Nov 23 '18 at 18:34
j08691
168k20199215
asked Nov 23 '18 at 18:31
user10676579user10676579
685
I want to change the gray color to a black color on mouse hover as it is on the image:
But its not working properly, its working like this "https://jsfiddle.net/83vnj5ru/5/", the search input border is not treated as a whole, the placeholder text color is not changing on hover and the cursor pointer is not appearing on hover the Filter 1 and Filter 2 dropdowns. Do you know why?
.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i {
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover {
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover {
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
}<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i {
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover {
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover {
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
}<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i {
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover {
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover {
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
}<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>html css
html css
edited Nov 23 '18 at 18:34
j08691
168k20199215
asked Nov 23 '18 at 18:31
user10676579user10676579
685
edited Nov 23 '18 at 18:34
j08691
168k20199215
asked Nov 23 '18 at 18:31
user10676579user10676579
685
edited Nov 23 '18 at 18:34
j08691
168k20199215
edited Nov 23 '18 at 18:34
j08691
168k20199215
edited Nov 23 '18 at 18:34
j08691
168k20199215
168k20199215
asked Nov 23 '18 at 18:31
user10676579user10676579
685
asked Nov 23 '18 at 18:31
user10676579user10676579
685
asked Nov 23 '18 at 18:31
user10676579user10676579
685
685
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Use
.dropdown-toggle:hover{
color:black;}
See snippet below.
.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i{
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover{
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover{
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
color:black;
}
.dropdown-toggle:hover{
color:black;
}
input:hover::-webkit-input-placeholder {
color: black;
}
/* Firefox < 19 */
input:hover:-moz-placeholder {
color: black;
}
input:hover::-moz-placeholder {
color: black;
}
input:hover:-ms-input-placeholder {
color: black;
}HTML:
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>answered Nov 23 '18 at 18:38
WildchildWildchild
110311
Thanks, but like that it seems that has the same issue, the search input and the search icon are not being treated as only 1 element but 2.
– user10676579
Nov 23 '18 at 18:45
Updated the snippet. The placeholder css code is included now.
– Wildchild
Nov 23 '18 at 18:50
You can learn more about these tricks here
– Wildchild
Nov 23 '18 at 18:52
Thanks, but do you know how to have only 1 border that is the same for the elements "<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>" and " <input type="text" class="form-control search-input p-0" placeholder="Search...">" ? So that when the user hovers the input type text it appears only 1 border around these two elements? Because as it is in when the user hovers the input type text it appears a border only around the input type text but not around the icon font span, but it should apepar 1 border around the two elements.
– user10676579
Nov 23 '18 at 19:26
@user10676579 the easiest way to do that is to put the two elements inside another element and apply the border to that parent element. Otherwise you'll always have to consider which sides of each element should have borders, also if you decide adding shadows, the end results would look weird.
– Mihail Minkov
Nov 23 '18 at 20:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451502%2fchange-color-on-hover-is-not-working-properly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Use
.dropdown-toggle:hover{
color:black;}
See snippet below.
.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i{
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover{
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover{
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
color:black;
}
.dropdown-toggle:hover{
color:black;
}
input:hover::-webkit-input-placeholder {
color: black;
}
/* Firefox < 19 */
input:hover:-moz-placeholder {
color: black;
}
input:hover::-moz-placeholder {
color: black;
}
input:hover:-ms-input-placeholder {
color: black;
}HTML:
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>answered Nov 23 '18 at 18:38
WildchildWildchild
110311
Thanks, but like that it seems that has the same issue, the search input and the search icon are not being treated as only 1 element but 2.
– user10676579
Nov 23 '18 at 18:45
Updated the snippet. The placeholder css code is included now.
– Wildchild
Nov 23 '18 at 18:50
You can learn more about these tricks here
– Wildchild
Nov 23 '18 at 18:52
Thanks, but do you know how to have only 1 border that is the same for the elements "<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>" and " <input type="text" class="form-control search-input p-0" placeholder="Search...">" ? So that when the user hovers the input type text it appears only 1 border around these two elements? Because as it is in when the user hovers the input type text it appears a border only around the input type text but not around the icon font span, but it should apepar 1 border around the two elements.
– user10676579
Nov 23 '18 at 19:26
@user10676579 the easiest way to do that is to put the two elements inside another element and apply the border to that parent element. Otherwise you'll always have to consider which sides of each element should have borders, also if you decide adding shadows, the end results would look weird.
– Mihail Minkov
Nov 23 '18 at 20:19
add a comment |
1
Use
.dropdown-toggle:hover{
color:black;}
See snippet below.
.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i{
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover{
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover{
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
color:black;
}
.dropdown-toggle:hover{
color:black;
}
input:hover::-webkit-input-placeholder {
color: black;
}
/* Firefox < 19 */
input:hover:-moz-placeholder {
color: black;
}
input:hover::-moz-placeholder {
color: black;
}
input:hover:-ms-input-placeholder {
color: black;
}HTML:
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>answered Nov 23 '18 at 18:38
WildchildWildchild
110311
Thanks, but like that it seems that has the same issue, the search input and the search icon are not being treated as only 1 element but 2.
– user10676579
Nov 23 '18 at 18:45
Updated the snippet. The placeholder css code is included now.
– Wildchild
Nov 23 '18 at 18:50
You can learn more about these tricks here
– Wildchild
Nov 23 '18 at 18:52
Thanks, but do you know how to have only 1 border that is the same for the elements "<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>" and " <input type="text" class="form-control search-input p-0" placeholder="Search...">" ? So that when the user hovers the input type text it appears only 1 border around these two elements? Because as it is in when the user hovers the input type text it appears a border only around the input type text but not around the icon font span, but it should apepar 1 border around the two elements.
– user10676579
Nov 23 '18 at 19:26
@user10676579 the easiest way to do that is to put the two elements inside another element and apply the border to that parent element. Otherwise you'll always have to consider which sides of each element should have borders, also if you decide adding shadows, the end results would look weird.
– Mihail Minkov
Nov 23 '18 at 20:19
add a comment |
1
1
1
Use
.dropdown-toggle:hover{
color:black;}
See snippet below.
.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i{
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover{
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover{
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
color:black;
}
.dropdown-toggle:hover{
color:black;
}
input:hover::-webkit-input-placeholder {
color: black;
}
/* Firefox < 19 */
input:hover:-moz-placeholder {
color: black;
}
input:hover::-moz-placeholder {
color: black;
}
input:hover:-ms-input-placeholder {
color: black;
}HTML:
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>answered Nov 23 '18 at 18:38
WildchildWildchild
110311
Use
.dropdown-toggle:hover{
color:black;}
See snippet below.
.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i{
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover{
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover{
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
color:black;
}
.dropdown-toggle:hover{
color:black;
}
input:hover::-webkit-input-placeholder {
color: black;
}
/* Firefox < 19 */
input:hover:-moz-placeholder {
color: black;
}
input:hover::-moz-placeholder {
color: black;
}
input:hover:-ms-input-placeholder {
color: black;
}HTML:
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i{
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover{
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover{
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
color:black;
}
.dropdown-toggle:hover{
color:black;
}
input:hover::-webkit-input-placeholder {
color: black;
}
/* Firefox < 19 */
input:hover:-moz-placeholder {
color: black;
}
input:hover::-moz-placeholder {
color: black;
}
input:hover:-ms-input-placeholder {
color: black;
}HTML:
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i{
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover{
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover{
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
color:black;
}
.dropdown-toggle:hover{
color:black;
}
input:hover::-webkit-input-placeholder {
color: black;
}
/* Firefox < 19 */
input:hover:-moz-placeholder {
color: black;
}
input:hover::-moz-placeholder {
color: black;
}
input:hover:-ms-input-placeholder {
color: black;
}HTML:
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>answered Nov 23 '18 at 18:38
WildchildWildchild
110311
edited Nov 23 '18 at 18:49
answered Nov 23 '18 at 18:38
WildchildWildchild
110311
answered Nov 23 '18 at 18:38
WildchildWildchild
110311
answered Nov 23 '18 at 18:38
WildchildWildchild
110311
110311
Thanks, but like that it seems that has the same issue, the search input and the search icon are not being treated as only 1 element but 2.
– user10676579
Nov 23 '18 at 18:45
Updated the snippet. The placeholder css code is included now.
– Wildchild
Nov 23 '18 at 18:50
You can learn more about these tricks here
– Wildchild
Nov 23 '18 at 18:52
Thanks, but do you know how to have only 1 border that is the same for the elements "<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>" and " <input type="text" class="form-control search-input p-0" placeholder="Search...">" ? So that when the user hovers the input type text it appears only 1 border around these two elements? Because as it is in when the user hovers the input type text it appears a border only around the input type text but not around the icon font span, but it should apepar 1 border around the two elements.
– user10676579
Nov 23 '18 at 19:26
@user10676579 the easiest way to do that is to put the two elements inside another element and apply the border to that parent element. Otherwise you'll always have to consider which sides of each element should have borders, also if you decide adding shadows, the end results would look weird.
– Mihail Minkov
Nov 23 '18 at 20:19
add a comment |
Thanks, but like that it seems that has the same issue, the search input and the search icon are not being treated as only 1 element but 2.
– user10676579
Nov 23 '18 at 18:45
Updated the snippet. The placeholder css code is included now.
– Wildchild
Nov 23 '18 at 18:50
You can learn more about these tricks here
– Wildchild
Nov 23 '18 at 18:52
Thanks, but do you know how to have only 1 border that is the same for the elements "<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>" and " <input type="text" class="form-control search-input p-0" placeholder="Search...">" ? So that when the user hovers the input type text it appears only 1 border around these two elements? Because as it is in when the user hovers the input type text it appears a border only around the input type text but not around the icon font span, but it should apepar 1 border around the two elements.
– user10676579
Nov 23 '18 at 19:26
@user10676579 the easiest way to do that is to put the two elements inside another element and apply the border to that parent element. Otherwise you'll always have to consider which sides of each element should have borders, also if you decide adding shadows, the end results would look weird.
– Mihail Minkov
Nov 23 '18 at 20:19
Thanks, but like that it seems that has the same issue, the search input and the search icon are not being treated as only 1 element but 2.
– user10676579
Nov 23 '18 at 18:45
Thanks, but like that it seems that has the same issue, the search input and the search icon are not being treated as only 1 element but 2.
– user10676579
Nov 23 '18 at 18:45
Updated the snippet. The placeholder css code is included now.
– Wildchild
Nov 23 '18 at 18:50
Updated the snippet. The placeholder css code is included now.
– Wildchild
Nov 23 '18 at 18:50
You can learn more about these tricks here
– Wildchild
Nov 23 '18 at 18:52
You can learn more about these tricks here
– Wildchild
Nov 23 '18 at 18:52
Thanks, but do you know how to have only 1 border that is the same for the elements "<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>" and " <input type="text" class="form-control search-input p-0" placeholder="Search...">" ? So that when the user hovers the input type text it appears only 1 border around these two elements? Because as it is in when the user hovers the input type text it appears a border only around the input type text but not around the icon font span, but it should apepar 1 border around the two elements.
– user10676579
Nov 23 '18 at 19:26
Thanks, but do you know how to have only 1 border that is the same for the elements "<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>" and " <input type="text" class="form-control search-input p-0" placeholder="Search...">" ? So that when the user hovers the input type text it appears only 1 border around these two elements? Because as it is in when the user hovers the input type text it appears a border only around the input type text but not around the icon font span, but it should apepar 1 border around the two elements.
– user10676579
Nov 23 '18 at 19:26
@user10676579 the easiest way to do that is to put the two elements inside another element and apply the border to that parent element. Otherwise you'll always have to consider which sides of each element should have borders, also if you decide adding shadows, the end results would look weird.
– Mihail Minkov
Nov 23 '18 at 20:19
@user10676579 the easiest way to do that is to put the two elements inside another element and apply the border to that parent element. Otherwise you'll always have to consider which sides of each element should have borders, also if you decide adding shadows, the end results would look weird.
– Mihail Minkov
Nov 23 '18 at 20:19
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451502%2fchange-color-on-hover-is-not-working-properly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
