CODEWITHSUNDEEP
htmlcsshover
Ahmed Elsayed
Ahmed Elsayed

Reputation: 1

Hover pseudo-class affects other elements

I wrote the hover pseudo-class for all input and label elements as shown in the image ,but when when I hover my mouse on one label the other indent directly to the right

Preview

The code is shown:

<Style>
    label {
width: 180px;
float: left;
text-align: right;
margin-right: 0.1em;
display:inline-block;
}
label[type:checkbox]+[type:radio]{
    width: auto;
input:hover { font-size:25px }
label:hover { font-size:25px }
</style>

Upvotes: 0

Views: 187

Answers (1)

andreas
andreas

Reputation: 16946

First of all, you should make clear that your markup is valid. As already mentioned in the comments, you forgot a curly brace { for your label[type...] descriptor.

To avoid the shifting of other elements on hover, you should make clear, that the hovered label height doesn't become greater than the height of the input element next to it. Therefore the line-height of the label and the height of the inputs should at least be 25px.

Since you haven't provided a Minimal, Complete, and Verifiable example the exact code is hard to guess, but the following should work:

input {
  height: 25px; /* <- */
}
label {
  width: 180px;
  float: left;
  text-align: right;
  margin-right: 0.1em;
  display: inline-block;
  line-height: 25px; /* <- */
}
label[type:checkbox]+[type:radio] {
  width: auto;
}
input:hover {
  font-size: 25px
}
label:hover {
  font-size: 25px
}

Upvotes: 1

Related Questions