How to Change -Webkit-Scrollbar Width When Hover on It

Best way to change div width on hover

Yes, with CSS you can do something similar with "Transition" but not as animated as in the example because you are limitated with CSS what to change on hover.
As I know you can't change elements before the element you hover over ( correct me if I'm wrong )

Here is a simple example ( https://jsfiddle.net/9510a6kj/ ) :

HTML

<div class="left"></div>
<div class="right"></div>

CSS

.left, .right{
    float:left;
}

.left{
    background: red;
    width: 200px;
    height: 300px;
    transition: width 1s ;
}

.right{
    background: blue;
    width: 300px;
    height: 300px;
    transition: width 1s;
}

.left:hover{
    width: 300px;
}

.left:hover + .right{
    width: 100px;
}

Maybe this helps

Transiton will "animate" ( more delay ) the change from width A to B

Cheers

On hover add width from left instead of right

adjust the margin-left instead of the width

#outer{
  width: 50px;
  height: 50px;
  margin: auto;
}

#inner{
  height: 50px;
  background-color: red;
  transition: all .5s;
}

#inner:hover{
  margin-left: -100px;
}

<div id="outer">
  <div id="inner"></div>
</div>

Change width and height of element on hover

If you want to stick with this method (there may be other methods that are simpler and more efficient), use absolute positioning, which removes elements from the normal flow, instead of relative positioning, which doesn't and, therefore, impacts surrounding elements.

Here's a basic example:

.cont {  position: relative;}
.some {  width: 250px;  height: 250px;  position: absolute;}
.some:hover {  z-index: 10;  width: 500px;  height: 500px;}
img:nth-child(1) { top: 0; left: 0; }img:nth-child(2) { top: 0; left: 255px; }img:nth-child(3) { top: 0; left: 510px; }img:nth-child(4) { top: 255px; left: 0px; }img:nth-child(5) { top: 255px; left: 255px; }img:nth-child(6) { top: 255px; left: 510px; }

<div clas="cont">  <img class="some" src="http://placehold.it/500x500.png">  <img class="some" src="http://placehold.it/500x500.png">  <img class="some" src="http://placehold.it/500x500.png">  <img class="some" src="http://placehold.it/500x500.png">  <img class="some" src="http://placehold.it/500x500.png">  <img class="some" src="http://placehold.it/500x500.png"></div>

Hover over DIV to expand width

I think that you don't need javascript for this.

html,body{ margin: 0 auto; height: 100%; width: 100%;}body { background-color: black;}#growContainer{ display: table; width:100%; height:100%;}.grow{ display: table-cell; height:100%; width: 25%; -webkit-transition:width 500ms; -moz-transition:width 500ms; transition:width 500ms;}#growContainer:hover .grow{ width:20%;}#growContainer:hover .grow:hover { width:40%;}

<div id="growContainer"><div class="grow" style="background-color:#2A75A9;"></div><div class="grow" style="background-color:#274257;"></div><div class="grow" style="background-color:#644436;"></div><div class="grow" style="background-color:#8F6048;"></div></div>

How to change width of responsive div on hover?

You need remove the whitespace between '#sidebar' and ':hover'. Like this:

#sidebar:hover {
    width: 50%;
}

And it works for me (changing size of the div).

How can I make the width transition smooth on hover?

You can center the icon with some left margin and use CSS transitions for the hover effect (see w3schools for some more examples):

#nav {  position: fixed;  top: 70px;  left: 70px;}.button {  position: relative;  background: white;  text-transform: uppercase;  font-size: 11px;  letter-spacing: 2px;  border: 1px solid #eee;  width: 20px;  height: 20px;  line-height: 20px;  -webkit-transition: width 1s;  transition: width 1s;}.button:hover {  width: 100%;}.text {  overflow: hidden;}.icon {  float: left;  margin: 0 5px;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div id="nav">
  <div class="button">    <div class="icon"><i class="fa fa-home" aria-hidden="true"></i>    </div>    <div class="text">home</div>  </div>
</div>

Change input width after transition on hover has ended

Check out transition-delay

You could do something like #autocomplete:hover {transition-delay:3s;} on the hover

As in the comments - this is setTimeout and used for JS delays, though I wouldn't recommend using it too much as it'll take up a lot of memory from your machine. You'll be a lot more efficient using CSS.

https://www.w3schools.com/jsref/met_win_settimeout.asp

input {  width:100px;  transition: 3s;}
input:hover, input:focus  {  width:100%;}

<input type='text' />

javascript: how can i get DIV width/height instantly even if changed on hover

You can create interval using setInterval() and get width of element in interval.

setInterval(function(){
  $("#w-count").html(
    Math.round($('.animating-width').width())
  );
  $("#h-count").html(
     Math.round($('.animating-width').height())
  );
}, 10);

$("#w-count").html($('.animating-width').width());$("#h-count").html($('.animating-width').height());setInterval(function(){  $("#w-count").html(    Math.round($('.animating-width').width())  );  $("#h-count").html(     Math.round($('.animating-width').height())  );}, 10);

html {  background: #292a2b;  color: #FFF;}.animating-width {  padding:10px 0;  text-align:center;  background: #e78629;  color: white;  height: 100px;  width: 50%;  -moz-transition: width 2s ease-in-out;  -o-transition: width 2s ease-in-out;  -webkit-transition: width 2s ease-in-out;  transition: width 2s ease-in-out;}.animating-width:hover {  cursor: pointer;  width: 100%;}hr{  border-color:#e78700;  border-bottom:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

CSS transition class width on hover

How about this instead? https://jsfiddle.net/jtnxL7cz/

.column {
  float: left;
  width: 33.33%;
  height:100%;
  transition: 0.3s;
}

.row:hover .column {
  width: 30%;
}

.row:hover .column:hover {
  width: 40%;
}

.a{
  background-color: #ff0000;
}

.b{
  background-color: #eeeeee;
}

.b:hover{
  background-color: #c41333;
}

.c{
  background-color: #cccccc;
}

.c:hover{
  background-color: #c41333;
}

css width transition on hover over a link

Your code is not working, because it has no working width. It's changing size because of the padding, and therefore the transition:max-width will not work.

Easy way to fix with your code is to add transition:all.

Check this:

a.link {      background: #0069b4 none repeat scroll 0% 0%;color: white;font-size: 24px;height: 60px;cursor: pointer;border-radius: 30px;text-align: center;padding: 10px 15px; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out;    }
a.link:hover {    padding: 10px 40px;    max-width: 100%;}
a.link:hover:after {    font-family: icomoon;    content: "\e903";    color: #ffffff;    font-size: 20px;          }

<a class="link">Order></a>