Question

我有一个缩略图列表。图像浮动到左侧。我希望文本在文本区域悬停时中途移动并重叠图像。我尝试过使用位置和最近翻译，但只是当我将鼠标悬停在它们上时，它只是移动我的文本标题和正文。我想移动整个div。我该怎么做？

＆＃13;

Family

＆＃13;

#gallery{
    margin-left:370px;
    width: auto;
    height:385px;
    position: relative;

}

#content{
    padding:20px 10px 0;
    margin:0px 20px 20px 0;
    color:#888888;
    float: left;

}
#content a,p, ul, li, h3{
    margin:0px;
    padding:0px;
}

#content>ul{
    list-style-type: none;
    width:700px;
    padding:0px;
    clear:left;
}

#content>ul>li h3,h6 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
    color:white;

}
#content>ul>li h3:hover {
    color:#66cc33;
}
#content ul> li{
    position: relative;
    background-color: #141414;
    padding:0 0 0 0;
}
#content li:nth-child(even){
    background-color:#333333;
}

#content li:first-child{
    padding-top: 0 !important;
}

#content > ul> li p{
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
  text-align: justify;
}
#content li {
  padding: 10px;
  overflow: auto;
}

#content li:hover {
  cursor: pointer;
  border-radius: 3px;
}
.thumbContainer{
    margin:0;
    padding:0;
}
.thumbContainer img {
    float: left;
    margin: 0 15px 0 0;
    height:93px;
    width:144px;
}
.latest-news-container{
    -webkit-transition: translate 2s ease-in-out;
    -moz-transition: translate 2s ease-in-out;
    transition: translate 2s ease-in-out;
}
div.latest-news-container :hover{
    -webkit-transform: translate(-50px);
    transform:  translate(-50px);
    -moz-transform:  translate(-50px);
    background-color: inherit;
}

＆＃13;

Answer 1

删除container和:hover

之间的空格

div.latest-news-container :hover{

将其更改为：

div.latest-news-container:hover{

css div hover以不同方式影响子元素

1 个答案: