Question

我试图以自己的方式复制悬停元素上的facebook更改图像。

但是我试图让它淡出，我似乎无法做到......我想知道是否有人可以帮助我。

任何帮助将不胜感激。我最好不要在没有jQuery或JS的情况下这样做。

到目前为止，我有这个（在JSfiddle上：http://jsfiddle.net/Blue_EyesWhiteDragon/p05e8n56）：

HTML：

<span class="right">
    <div class="ui-root">
       <a href="#" class="ui-img"><img class="profimg" id="profileimg" src="http://i.imgur.com/CabNLvV.jpg" width="130" height="130"></a>
       <a href="#" class="ui-link" role="button">
       <div class="ui-popover">
          <img class="ui-dimg" src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yx/r/PuyR8Oy6W1C.png" alt="" width="32" height="32">
          <div class="ui-text">Update Image</div>7
       </div>
        </a>
    </div>
</span>

CSS：

.ui-root{
    cursor: pointer;
    height: 130px;
    width: 130px;
}

.ui-root a:link, a:visited {
    text-decoration: none;
}

.ui-link{
    display: block;
    text-align: center;
    position: relative;
    visibility: hidden;
    top: -44px;
    width: 130px;
    height: 40px;
    background-color: rgba(0, 0, 0, 68);
    color: white;
    opacity: 0;
    -webkit-transition: padding 2s, //Contains Hover off | Chrome & Safari
    -moz-transition: padding 2s; //Mozilla
    -o-transition: padding 2s; //Opera
    transition: padding 2s; //IE
}

.ui-img:hover + .ui-link{
    zoom: 1;
    opacity: 1;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.68);
    border-radius: 1px;
    -webkit-transition: border-radius 2s, background-color 300ms linear, opacity 300ms linear; //Contains Hover on | Chrome & Safari
    -moz-transition: border-radius 2s, background-color 300ms linear, opacity 300ms linear; //Mozilla
    -o-transition: border-radius 2s, background-color 300ms linear, opacity 300ms linear; //Opera
    transition: border-radius 2s, background-color 300ms linear, opacity 300ms linear; //IE
}

.ui-link:hover{
    zoom: 1;
    opacity: 1;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.87);
    border-radius: 1px;
    -webkit-transition: padding 2s, background-color 300ms linear, opacity 300ms linear; //Contains Hover off | Chrome & Safari
    -moz-transition: padding 2s, background-color 300ms linear, opacity 300ms linear; //Mozilla
    -o-transition: padding 2s, background-color 300ms linear, opacity 300ms linear; //Opera
    transition: padding 2s, background-color 300ms linear, opacity 300ms linear; //IE
}

.ui-dimg{
    display: block;
    text-align: left;
    position: absolute;
    top: 2px;
    left: 2px;
}

.ui-text{
    display: block;
    text-align: left;
    width: 108px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 12px;
    padding-top: 10px;
    top: 2px;
    left: -2px;
    position: absolute;
    font-weight: 700;
    font-size: 12px;
    font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
    word-wrap: break-word;
}

.ui-popover{
    position: absolute;
    z-index: 5;
    left: 0px;
}

Answer 1

您是否正在尝试做这样的事情

.ui-root {
  cursor: pointer;
  height: 130px;
  width: 130px;
}
.ui-root a:link,
a:visited {
  text-decoration: none;
}
.ui-link {
  display: block;
  text-align: center;
  position: relative;
  top: -44px;
  width: 130px;
  height: 40px;
  background-color: rgba(0, 0, 0, 68);
  color: white;
  opacity: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.ui-img:hover + .ui-link {
  zoom: 1;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.68);
  border-radius: 1px;
}
.ui-link:hover {
  zoom: 1;
  opacity: 1;
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.87);
  border-radius: 1px;
}
.ui-dimg {
  display: block;
  text-align: left;
  position: absolute;
  top: 2px;
  left: 2px;
}
.ui-text {
  display: block;
  text-align: left;
  width: 108px;
  padding-bottom: 10px;
  padding-left: 40px;
  padding-right: 12px;
  padding-top: 10px;
  top: 2px;
  left: -2px;
  position: absolute;
  font-weight: 700;
  font-size: 12px;
  font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
  word-wrap: break-word;
}
.ui-popover {
  position: absolute;
  z-index: 5;
  left: 0px;
}

<span class="right">
    <div class="ui-root">
    <a href="#" class="ui-img">
        <img class="profimg" id="profileimg" src="http://i.imgur.com/CabNLvV.jpg" width="130" height="130"></a>
        <a href="#" class="ui-link" role="button">
    <div class="ui-popover">
        <img class="ui-dimg" src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yx/r/PuyR8Oy6W1C.png" alt="" width="32" height="32" />
        <div class="ui-text">Update Image</div>
        </div>
</a>
    </div>
</span>

CSS Onmouseexit淡出

1 个答案: