Hover affects other divs

Whenever I hover one div, the other one also activate its hover state. Is there a way to prevent that?
Here’s the pen

It’s because you don’t have a width defined for .h-bookmark. When you expand the width of one child of .h-bookmark, it’ll expand all of them to the same width, even if you only want one. Just add the standard width to the base class.

	.h-bookmark {
		position: relative;
		cursor: pointer;
		width: calc(var(--height-arrow) * 2);
	}
5 Likes

I rewrite it and I got the same problem but now it affects box-shadow.

When div-1 enters the hover state then a sudden move to div-2, the div-2 will follow the 100% width of div-1 for a split second.

The problem is that when you use grid you get ‘grids’ and columns align to the longest item. You have the transition effect taking place which means as you quickly hover another item the columns is still wider than its current content so snaps back at the end.

A quick fix would be to only do the transition on hover so that the transition stops as soon as you move to another item.

e.g.

:root {
	--size: 6rem;
}
* {
	margin: 0;
	padding: 0;
	font: 62.5%/1.2 Arial;
	box-sizing: border-box;
}
body {
	height: 100%;
	background-color: #bbb;
}
.container {
	display: grid;
	height: 100vh;
	background-color: #ccc;
	align-items: center;
	justify-content: start;
	position: relative;
	padding: 0;
}
.content {
 border: 1px solid;
 /*transition: all .4s;*/
	position: relative;
	display: flex;
	width: calc(var(--size) * 2.5);
	margin-right: auto;
	cursor: pointer;
	left: calc((var(--size) / 20) * -2);
	z-index: 1;
	/*transition: all .5s;*/
}
.text {
 /*transition: all .5s;*/
	width: calc(var(--size) * 2);
	background-color: #fff;
	padding: calc(var(--size) / 5);
	width: calc(var(--size) * 2);
	font-size: calc(var(--size) / 2);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 10% 0 0 10%;
	position: relative;
	border-radius: calc(var(--size) / 10) 0 0 0;
	z-index: 1;
	margin-bottom: calc(var(--size) * .1);
	clip-path: inset(-.5rem -.5rem -.5rem);
	box-shadow: .5rem .5rem .3rem -.2rem gray;
}
.content:hover,.text {
	width: 100%;
 transition:all .5s;
}

Alternatively do away with grid and use flex to space the items vertically but you would still have an issue with the width:100% stretching all the way across (you can’t animate to an auto width).

There seems to be way too much code for a simple effect but I’d need to know the exact criteria before I start putting pen to paper :slight_smile:

Got bored so did it anyway :slight_smile:

It may not be what you wanted but is much more concise and easier to manage. :wink:

4 Likes

Solved it by having a max-content on the parent container of the .text, changed the element affected by the transition to .content:hover .text, instead of .content:hover, .text. I also noticed that the css code is messy so I removed the repetitive rules.

Since I didn’t wrapped the text, I changed the parent container’s width to max-content so it follows its child’s width, which is .text. I didn’t apply the max-content to .text because I shrunk its width so the ellipsis effect will apply.

.content {
   width: max-content
}
.text {
   width: calc(var(--size) * 2);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}
.content:hover .text {
   width: 100%;
}

Ohh, I just noticed the answers now. Thanks! Your answer is definitely cleaner but I think I’ll stick to the divs.

Max-content isn’t supported in Edge or IE11 (if you are trying to support those browsers).

I looked at your updated pen and it still looks weird with borders not following the content and margins where they shouldn’t be.

There is still some unnecessary code in your pen as well as some bad coding practices (e.g. putting font size in the universal selector will cause compounding of font size and also kill inheritance).

Semantically paragraphs should be in a p tag and not a bare div. The odd word in a div is ok but generally there is a proper named tag for the job in hand :slight_smile:

Also avoid empty divs just for effects that can be done by other means. Sometimes you have no choice but to add an extra element but always try to keep HTML as clean as possible. :wink:

I realize this is a work in progress so hopefully you will address the issues I mentioned in due course :slight_smile:

2 Likes