Question

当我将鼠标悬停在按钮上时，我正在尝试使背景图像平滑过渡。我曾尝试在许多已回复的帖子中寻找方法，但我无法将这些方法应用于我的代码。我知道我需要使用J Query但我也无法使用它。没有J Query试验和错误的当前代码： http://jsfiddle.net/6YEAG/26/

        function SwapInst()
        {
            document.getElementById("BG").style.backgroundImage = "url(/Images/Instruments.jpg)";
        }

.Button
{
    background: rgba(255, 255, 255, .5);
    font-family: 'Cinzel', serif;
    font-size: 20px;
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.Button:hover
{
    background: rgba(15, 0, 0, 0.3);
    font-family: 'Cinzel', serif;
    border: none;
    color: black;
    padding: 13px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

  <body class="body" id ="BG" style="height: 645px; background-image:url(/Images/Menu.jpg); background-size:auto;">
  <div style="font-size: 25px; color: black; text-align:center;" id ="MainHeader">
    <br />
    <h1> RED INSTRUMENTS </h1>
    <h2> Instruments and parts shop </h2>
  </div> 
  <div style="font-size: 30px; color: black; text-align: center;">
           <br />
           <br />
           <br />
            <input class="Button" onmouseover="SwapInst()" id="InstButton" type="button" value="Our Instruments" />
            <input class="Button" id="PartsButton" type="button" value="Our Parts" />
            <input class="Button" id="ContactButton" type="button" value="Contact us" />
  </div>
  </body>

Answer 1

按钮背景与Jquery完美匹配。演示（现场演示）： -

https://jsfiddle.net/dhirenpateldev/dmtz34ma/1/

HTML： -

<body class="body" id ="BG" style="height: 645px;">
  <div style="font-size: 25px; color: black; text-align:center;" id ="MainHeader">
    <br />
    <h1> RED INSTRUMENTS </h1>
    <h2> Instruments and parts shop </h2>
  </div> 
  <div style="font-size: 30px; color: black; text-align: center;">
           <br />
           <br />
           <br />
            <input class="Button"  id="InstButton" type="button" value="Our Instruments" />
            <input class="Button" id="PartsButton" type="button" value="Our Parts" />
            <input class="Button" id="ContactButton" type="button" value="Contact us" />
  </div>
  </body>

脚本： -

   $(document).ready(function() {
    $("#InstButton").on({
        mouseenter: function() {
           $("#BG").parent().css('background-color', 'red');
          // $("#BG..parent().css('background-image', "url('/ Put Your Web Link Here /')");")
        },
        mouseleave: function() {
           $("#BG").parent().css('background-color', 'White');
        }
    });
     $("#PartsButton").on({
        mouseenter: function() {
           $("#BG").parent().css('background-color', 'green');
        },
        mouseleave: function() {
           $("#BG").parent().css('background-color', 'White');
        }
    });
     $("#ContactButton").on({
        mouseenter: function() {
           $("#BG").parent().css('background-color', 'blue');
        },
        mouseleave: function() {
           $("#BG").parent().css('background-color', 'White');
        }
    });

});

CSS： -

.Button
{
    background: rgba(255, 255, 255, .5);
    font-family: 'Cinzel', serif;
    font-size: 20px;
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.Button:hover
{
    background: rgba(15, 0, 0, 0.3);
    font-family: 'Cinzel', serif;
    border: none;
    color: black;
    padding: 13px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

这项工作完美地使用jquery

希望它的工作!!

Answer 2

您是否尝试过使用css属性转换？

http://www.w3schools.com/css/css3_transitions.asp

.Button
{
    background: rgba(255, 255, 255, .5);
    font-family: 'Cinzel', serif;
    font-size: 20px;
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.Button:hover
{
    transition: banckground 1s rgba(15, 0, 0, 0.3)
    font-family: 'Cinzel', serif;
    border: none;
    color: black;
    padding: 13px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

Answer 3

＆＃13;

.button-array {
  text-align: center;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  }

.button {
  font-size: 21px;
  text-align: center
  align-self: auto;
  padding: 20px;
  -webkit-transition:all 0.3s ease 0s;
  -moz-transition:all 0.3s ease 0s;
  transition: all 0.3s ease 0s
  }

.button:hover {
  background-color: #ccc;
  background-image: url(http://i66.tinypic.com/3029ua0.jpg);
  }

＆＃13;

<div class="button-array">
  <div class="button">
    Our Instruments
    </div>
 <div class="button">
    Our Parts
    </div>
  <div class="button">
    Contact Us
    </div>
  </div>

＆＃13;

你应该看看CSS为你做这件事，因为它更容易控制和改变你需要。我使用flex类来创建对齐，使用:hover类来创建效果。您也可以使用图像背景进行此操作。

Answer 4

您需要为此使用不透明度，但正文上的不透明度会使所有页面都不可见。

我为此目的使用了伪元素。

因为这是一个片段，所以在身体上设置id是不可能的（或者至少我不知道怎么做），所以到达身体有点困难：

let test = document.getElementById('test');
let body = document.getElementsByTagName('body')[0];
test.addEventListener("mouseenter",function(){
    body.className = 'active';
});
test.addEventListener("mouseout",function(){
    body.className = '';
});

html, body {
    width: 100%;
  height: 100%;
  position: relative;
}

body:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
    background-image: url(http://lorempixel.com/400/200);  
  background-size: cover;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: -1;
}

body.active:after {
  opacity: 1;
}

#test {
   width: 80px;
  height: 50px;
  border: solid 1px red;
  background-color: white;
  margin: 10px;

}

<div id="test">test</div>

Answer 5

你可以使用css3过渡属性，比如..

.Button
{
    /*ur code*/
    .......
    transition:all 0.8s;
}
.Button:hover
{
    /*ur code*/
    .......
    background-image: url(http://i66.tinypic.com/3029ua0.jpg);
}

Answer 6

@ arthur-medeiros你的anwser很糟糕，因为作者需要改变按钮背景而不是bodys

我认为只有jQuery才能解决你的问题。很可能你需要一些能够过渡动画的插件。

按钮悬停问题的背景转换

6 个答案: