jq父元素怎么获取（css设置鼠标悬停状态）

我们在图片类网站开发时， 会遇到这个问题： 长方形的图片，在固定的宽高容器里（DIV），会显示一竖条，毕竟图片是宽高是无规则的，这样一来，看着会有点丑。就如下图所示：

注意是固定宽高的容量里放的图片

从上边的图，可以看出，一般，我们是固定图片的最大高度（max-height），这样图片不变形的显示在框里，对于左右空白的，会不会看着很突兀，不协调，甚至有点丑吧（个人看法）。

那么，我们怎么来处理左右空白的问题呢？

你也可以把这个问题当成，怎么自适应图片呢？ 有一个做法是：把图片放大（不变形的情况下），占满父容器。这样一来，图片上的重要信息，可能会被隐藏。 因此，我们的另一个做法是：用颜色填充左右空白。

既然，我们要填充，就要知道颜色值，图片上就要取色，而且是主色才行，不然看起来也会很突兀。

因此，今天推荐一个取图片主色并应用到父元素背景上的jQuery插件：

jquery.adaptive-background.js。

先来看一下它的效果图吧（针对上图的左右空白处理）

提取图片颜色并应用到父元素背景上

那么，什么是

jquery.adaptive-background.js呢？

它是一个jQuery插件，依赖于jQuery1.8+，实现从一个图片中提取主要颜色值，并应用到父元素的背景色上。

此插件兼容IE9+，Chrome，Firefox等主流浏览器。

那么，怎么使用它呢？

首先，你需要到github上搜索：

jquery.adaptive-background.js，然后引入页面中，接着如图所示使用就可以了。

简单的使用此插件的方法

那么，针对实际效果，我们通过放慢速度，来查看一下

演示此插件的应用效果

是不是，感觉父元素设置了和图片接近的颜色，看着就好多了。

通过$.adaptiveBackground.run()就可以初始化带有data-adaptive-background属性的图片元素了，这里的run()，其实是有配置选项的。

比如：run({normalizeTextColor: true})，它表示：如果图片提取的颜色应用到父元素背景上了，表现的太亮或者太暗，文字显示不清楚了，就自动调节文字的颜色。举例如下：

为了达到演示效果，我们延迟了2秒

从图上，我们看出，文字的颜色从红色，变成了白色，就是为了不埋没它。

它还有很多配置，这里就不一一列举了，感兴趣的朋友可以到github上看一下。

至此，就介绍完这个强大的取色并自适应背景的插件了，也许它的应用场景比较有限，但是一个好的用户体验，是我们要关注的，不管它的大小如何。