diff --git a/dde-dock/Resources/qss/default.qss b/dde-dock/Resources/qss/default.qss
new file mode 100644
index 000000000..d34617f64
--- /dev/null
+++ b/dde-dock/Resources/qss/default.qss
@@ -0,0 +1,29 @@
+QLabel#Panel {
+    background-color: rgba(0,0,0,0.3);
+}
+
+QLabel#AppBackground[isCurrentOpened="true"][isHovered="true"] {/*item is current opened and is hovered*/
+    background: rgba(0,255,255,0.5);
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(255,255,255,0.3);
+}
+QLabel#AppBackground[isCurrentOpened="true"][isHovered="false"] {/*item is current opened but not hovered*/
+    background: rgba(0,255,255,0.4);
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(255,255,255,0.3);
+}
+
+QLabel#AppBackground[isActived="true"][isHovered="true"][isCurrentOpened="false"] {/*item is actived and hovered*/
+    background: rgba(255,255,255,0.3);
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(255,255,255,0.3);
+}
+QLabel#AppBackground[isActived="true"][isHovered="false"][isCurrentOpened="false"] {/*item is actived but not hovered*/
+    background: rgba(255,255,255,0.15);
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(255,255,255,0.3);
+}
diff --git a/dde-dock/dde-dock.pro b/dde-dock/dde-dock.pro
index b4be5417c..af84544bf 100644
--- a/dde-dock/dde-dock.pro
+++ b/dde-dock/dde-dock.pro
@@ -42,7 +42,8 @@ HEADERS  += \
     src/Widgets/appitem.h
 
 RESOURCES += \
-    images.qrc
+    images.qrc \
+    qss.qrc
 
 PKGCONFIG += gtk+-2.0 x11
 CONFIG += c++11 link_pkgconfig
diff --git a/dde-dock/qss.qrc b/dde-dock/qss.qrc
new file mode 100644
index 000000000..5c7af4230
--- /dev/null
+++ b/dde-dock/qss.qrc
@@ -0,0 +1,5 @@
+<RCC>
+    <qresource prefix="/">
+        <file>Resources/qss/default.qss</file>
+    </qresource>
+</RCC>
diff --git a/dde-dock/src/Panel/panel.cpp b/dde-dock/src/Panel/panel.cpp
index 8f1662b8d..ec702e035 100644
--- a/dde-dock/src/Panel/panel.cpp
+++ b/dde-dock/src/Panel/panel.cpp
@@ -3,8 +3,7 @@
 Panel::Panel(QWidget *parent)
     : QLabel(parent),parentWidget(parent)
 {
-    this->setStyleSheet("QWidget{background-color: rgba(0,0,0,0.3);}");
-
+    this->setObjectName("Panel");
     leftLayout = new DockLayout(this);
     leftLayout->resize(1024,50);
     leftLayout->move(0,0);
diff --git a/dde-dock/src/Widgets/appbackground.cpp b/dde-dock/src/Widgets/appbackground.cpp
index cfd5ad7b3..e27eea42e 100644
--- a/dde-dock/src/Widgets/appbackground.cpp
+++ b/dde-dock/src/Widgets/appbackground.cpp
@@ -3,5 +3,44 @@
 AppBackground::AppBackground(QWidget *parent) :
     QLabel(parent)
 {
-    this->setStyleSheet("QLabel#AppBackground{background: rgba(255,255,255,0.3);border-radius: 4px;}");
+    this->setObjectName("AppBackground");
+}
+
+bool AppBackground::getIsActived()
+{
+    return m_isActived;
+}
+
+void AppBackground::setIsActived(bool value)
+{
+    m_isActived = value;
+
+    style()->unpolish(this);
+    style()->polish(this);// force a stylesheet recomputation
+}
+
+bool AppBackground::getIsCurrentOpened()
+{
+    return m_isCurrentOpened;
+}
+
+void AppBackground::setIsCurrentOpened(bool value)
+{
+    m_isCurrentOpened = value;
+
+    style()->unpolish(this);
+    style()->polish(this);// force a stylesheet recomputation
+}
+
+bool AppBackground::getIsHovered()
+{
+    return m_isHovered;
+}
+
+void AppBackground::setIsHovered(bool value)
+{
+    m_isHovered = value;
+
+    style()->unpolish(this);
+    style()->polish(this);// force a stylesheet recomputation
 }
diff --git a/dde-dock/src/Widgets/appbackground.h b/dde-dock/src/Widgets/appbackground.h
index 54f2b066d..91b910c5e 100644
--- a/dde-dock/src/Widgets/appbackground.h
+++ b/dde-dock/src/Widgets/appbackground.h
@@ -3,19 +3,34 @@
 
 #include <QObject>
 #include <QLabel>
+#include <QStyle>
 #include <QDebug>
 #include "dockconstants.h"
 
 class AppBackground : public QLabel
 {
     Q_OBJECT
+    Q_PROPERTY(bool isActived READ getIsActived WRITE setIsActived)
+    Q_PROPERTY(bool isCurrentOpened READ getIsCurrentOpened WRITE setIsCurrentOpened)
+    Q_PROPERTY(bool isHovered READ getIsHovered WRITE setIsHovered)
 public:
     explicit AppBackground(QWidget *parent = 0);
 
+    bool getIsActived();
+    void setIsActived(bool value);
+    bool getIsCurrentOpened();
+    void setIsCurrentOpened(bool value);
+    bool getIsHovered();
+    void setIsHovered(bool value);
+
 signals:
 
 public slots:
 
+private:
+    bool m_isActived = false;
+    bool m_isCurrentOpened = false;
+    bool m_isHovered = false;
 };
 
 #endif // APPBACKGROUND_H
diff --git a/dde-dock/src/Widgets/appitem.cpp b/dde-dock/src/Widgets/appitem.cpp
index 17b56f461..6807271a5 100644
--- a/dde-dock/src/Widgets/appitem.cpp
+++ b/dde-dock/src/Widgets/appitem.cpp
@@ -50,6 +50,7 @@ void AppItem::resizeResources()
 void AppItem::initBackground()
 {
     appBackground = new AppBackground(this);
+//    appBackground->setObjectName("appBackground");
     appBackground->resize(width(), height());
     appBackground->move(0,0);
 }
@@ -58,6 +59,8 @@ void AppItem::mousePressEvent(QMouseEvent * event)
 {
     //qWarning() << "mouse press...";
     emit mousePress(event->globalX(), event->globalY());
+    ////////////FOR TEST ONLY/////////////////////
+    appBackground->setIsActived(!appBackground->getIsActived());
 }
 
 void AppItem::mouseReleaseEvent(QMouseEvent * event)
@@ -69,6 +72,8 @@ void AppItem::mouseReleaseEvent(QMouseEvent * event)
 void AppItem::mouseDoubleClickEvent(QMouseEvent * event)
 {
     emit mouseDoubleClick();
+    ////////////FOR TEST ONLY/////////////////////
+    appBackground->setIsCurrentOpened(!appBackground->getIsCurrentOpened());
 }
 
 void AppItem::mouseMoveEvent(QMouseEvent *event)
@@ -97,11 +102,13 @@ void AppItem::mouseMoveEvent(QMouseEvent *event)
 void AppItem::enterEvent(QEvent *event)
 {
     emit mouseEntered();
+    appBackground->setIsHovered(true);
 }
 
 void AppItem::leaveEvent(QEvent *event)
 {
     emit mouseExited();
+    appBackground->setIsHovered(false);
 }
 
 void AppItem::dragEnterEvent(QDragEnterEvent *event)
diff --git a/dde-dock/src/main.cpp b/dde-dock/src/main.cpp
index 3f9de6f8e..ee5151748 100644
--- a/dde-dock/src/main.cpp
+++ b/dde-dock/src/main.cpp
@@ -1,9 +1,24 @@
 #include <QApplication>
+#include <QFile>
+#include <QDebug>
 #include "mainwidget.h"
 
 int main(int argc, char *argv[])
 {
     QApplication a(argc, argv);
+
+    QFile file("://Resources/qss/default.qss");
+    if (file.open(QFile::ReadOnly))
+    {
+        QString styleSheet = QLatin1String(file.readAll());
+        qApp->setStyleSheet(styleSheet);
+        file.close();
+    }
+    else
+    {
+        qWarning() << "[Error:] Open  style file errr!";
+    }
+
     MainWidget w;
     w.show();