CSS或jQuery悬停效果，增加固定框和显示绝对位置的较大版本

CSS or jQuery hover effect to increase a fixed box and show absolute position larger version

本文关键字：显示 位置 版本 悬停 jQuery 增加 CSS      更新时间：2023-09-26

如何使我的颜色框的大小增加(在相同的位置，猜测绝对位置，所以它不影响颜色的其他位置)，当你悬停时将显示一个更大的版本的颜色，当你悬停。这会使用背景图像大小吗?

我已经添加了一个图像来测试红色的。

#product_color_select li {
	display: inline-block;
	width: 30px;
	height: 25px;
	text-indent: -999999em;
	cursor: pointer;
}
/* interior colours */
#product_color_select li.eco-weave {
	background-color: #beaaaa;
}
#product_color_select li.aubergine-dream {
	background-color: #382643;
}
#product_color_select li.lime-citrus {
	background-color: #99a366;
}
#product_color_select li.blue-jazz {
	background-color: #435fa1;
}
#product_color_select li.sakura-pink {
	background-color: #bf3253;
}
#product_color_select li.hot-chocolate {
	background-color: #3b2b28;
}
#product_color_select li.tundra-spring {
	background-color: #c5c1d0;
}
#product_color_select li.black-sapphire {
	background-color: #131114;
}
#product_color_select li.luscious-grey {
	background-color: #7a6772;
}
#product_color_select li.wildberry-deluxe {
	background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/wildberry-deluxe.png');
}
<ul class="fabric-select" id="product_color_select">
    <li class=" eco-weave" data-value="742" title="Eco Weave">Eco Weave</li>
    <li class=" blue-jazz" data-value="749" title="Blue Jazz">Blue Jazz</li>
    <li class=" sakura-pink" data-value="743" title="Sakura Pink">Sakura Pink</li>
    <li class="selected luscious-grey" data-value="744" title="Luscious Grey">Luscious Grey</li>
    <li class=" lime-citrus" data-value="748" title="Lime Citrus">Lime Citrus</li>
    <li class=" hot-chocolate" data-value="741" title="Hot Chocolate">Hot Chocolate</li>
    <li class=" black-sapphire" data-value="746" title="Black Sapphire">Black Sapphire</li>
    <li class=" wildberry-deluxe" data-value="727" title="Wildberry Deluxe">Wildberry Deluxe</li>
    <li class=" tundra-spring" data-value="747" title="Tundra Spring">Tundra Spring</li>
    <li class=" aubergine-dream" data-value="745" title="Aubergine Dream">Aubergine Dream</li>
</ul>

在元素的悬停处使用CSS3 scale属性。希望对你有帮助。

此外，您可以使用transition属性来添加一些舒缓

#product_color_select li {
	display: inline-block;
	width: 30px;
	height: 25px;
	text-indent: -999999em;
	cursor: pointer;
vertical-align:top;
}
#product_color_select li:hover{ 
-webkit-transform:scale(1.2);  
-moz-transform:scale(1.2);
transform:scale(1.2);
}
/* interior colours */
#product_color_select li.eco-weave {
	background-color: #beaaaa;
}
#product_color_select li.aubergine-dream {
	background-color: #382643;
}
#product_color_select li.lime-citrus {
	background-color: #99a366;
}
#product_color_select li.blue-jazz {
	background-color: #435fa1;
}
#product_color_select li.sakura-pink {
	background-color: #bf3253;
}
#product_color_select li.hot-chocolate {
	background-color: #3b2b28;
}
#product_color_select li.tundra-spring {
	background-color: #c5c1d0;
}
#product_color_select li.black-sapphire {
	background-color: #131114;
}
#product_color_select li.luscious-grey {
	background-color: #7a6772;
}
#product_color_select li.wildberry-deluxe {
	background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/wildberry-deluxe.png');
}
<ul class="fabric-select" id="product_color_select">
    <li class=" eco-weave" data-value="742" title="Eco Weave">Eco Weave</li>
    <li class=" blue-jazz" data-value="749" title="Blue Jazz">Blue Jazz</li>
    <li class=" sakura-pink" data-value="743" title="Sakura Pink">Sakura Pink</li>
    <li class="selected luscious-grey" data-value="744" title="Luscious Grey">Luscious Grey</li>
    <li class=" lime-citrus" data-value="748" title="Lime Citrus">Lime Citrus</li>
    <li class=" hot-chocolate" data-value="741" title="Hot Chocolate">Hot Chocolate</li>
    <li class=" black-sapphire" data-value="746" title="Black Sapphire">Black Sapphire</li>
    <li class=" wildberry-deluxe" data-value="727" title="Wildberry Deluxe">Wildberry Deluxe</li>
    <li class=" tundra-spring" data-value="747" title="Tundra Spring">Tundra Spring</li>
    <li class=" aubergine-dream" data-value="745" title="Aubergine Dream">Aubergine Dream</li>
</ul>

相关文章：