右侧分享按钮html代码,微信分享到朋友圈按钮 右上角提示

以下是微信分享到朋友圈按钮的HTML代码：

<div class="wechat-moments-share">
  <a href="javascript:;" class="wechat-moments-btn">
    <i class="fa fa-weixin"></i>
    <p>分享到朋友圈</p>
  </a>
  <div class="wechat-moments-qrcode">
    <img src="wechat-moments-qrcode.jpg" alt="微信扫码分享到朋友圈">
    <p>微信扫码分享到朋友圈</p>
  </div>
</div>

CSS代码：

.wechat-moments-share {
  position: relative;
  display: inline-block;
}

.wechat-moments-btn {
  display: block;
  color: #fff;
  background-color: #00bb29;
  text-align: center;
  padding: 10px 20px;
  border-radius: 5px;
}

.wechat-moments-btn i {
  font-size: 20px;
  margin-right: 5px;
}

.wechat-moments-qrcode {
  position: absolute;
  top: 40px;
  right: -110px;
  width: 150px;
  text-align: center;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  display: none;
}

.wechat-moments-qrcode img {
  width: 100%;
  margin-bottom: 5px;
}

.wechat-moments-btn:hover + .wechat-moments-qrcode,
.wechat-moments-qrcode:hover {
  display: block;
}

@media (max-width: 768px) {
  .wechat-moments-qrcode {
    top: 60px;
    right: -190px;
  }
}

JavaScript代码：

$('.wechat-moments-btn').hover(function() {
  $(this).next('.wechat-moments-qrcode').show();
}, function() {
  $(this).next('.wechat-moments-qrcode').hide();
});

其中，`wechat-moments-qrcode.jpg` 是微信扫码分享到朋友圈的二维码图片地址。你需要替换成你自己的二维码图片。