用鼠标悬停显示信息
[英]showing the information with mouse hover
问题描述
我正在尝试创建一个应用程序，让用户从菜单下订单。 我的问题是当用户将鼠标悬停在菜单中的一个图像上时，应该显示另一个图像以及该项目的描述和价格。 每个图像的 id 属性标识了滚动时要显示的图像。 我厌倦了将第一张图片翻转并显示说明和价格，但问题是当您单击第一张图片时，它没有在订单框中显示价格，并且图片也没有显示
$(function(){ //declare prices and varaibles var item1 = $("#item1"); item1.val(7.99); var item2 = $("#item2"); item2.val(1.99); var item3 = $("#item3"); item3.val(9.99); var item4 = $("#item4"); item4.val(12.99); var item5 = $("#item5"); item5.val(17.99); var item6 = $("#item6"); item6.val(3.99); var Total = $("#Total"); var Amount = 0; //onclick var item = $(".item"); var txtArea = $("#txtArea"); var orderList = ""; //Events item.click(function(event){ Amount+=parseFloat($(event.target).val()); orderList+=parseFloat($(event.target).val())+"$ -"+event.target.id +"\\n"; txtArea.val(orderList); Total.html("Total: "+Amount.toFixed(2)+"$"); }); //Events item.hover(function(){ $(event.target).text($(event.target).val()+"$"); $(event.target).addClass("dark"); }, function(){ $(event.target).text(""); $(event.target).removeClass("dark"); }); //Clear Button var ClearOrder = $("#ClearOrder"); //Events ClearOrder.click(function(){ Amount = 0; Total.html("Total: "+Amount.toFixed(2)); orderList =""; txtArea.val(orderList); }); })
* { box-sizing: border-box; font-family: "san-serif"; } body{ margin:0px; padding:0px; } .Outside-Container{ margin:10px; position:absolute; border:2px solid black; border-radius:5%; width:60%; height:auto; left:20%; overflow:hidden; } .container{ position:relative; width:70%; height:auto; left:15%; overflow:hidden; } .top-logo-holder{ width:100%; height:auto; } .logo-img{ width: 31%; display: block; margin: 0 auto; } .line{ height:2px; width:100%; position:relative; background:teal; border-radius:25%; } .main-section{ width:100%; position:relative; height:auto; } .row1{ display:flex; flex-wrap:no-wrap; flex-direction: row; } .row2{ display:flex; flex-wrap:no-wrap; flex-direction: row; transition:0.8s; } .item{ width:300px; height:17vh; background:pink; margin:5px; color:#fff; transition:0.3s; font-size:20px; cursor:pointer; } .row1 .item:nth-child(1){ background:url("https://i.postimg.cc/2yCtXwNn/img1.jpg"); background-size:cover; } .row1 .item:nth-child(2){ background:url("https://i.postimg.cc/vTXKRVGk/img2.jpg"); background-size:cover; } .row1 .item:nth-child(3){ background:url("https://i.postimg.cc/J7QvH9jx/img3.jpg"); background-size:cover; } .row2 .item:nth-child(1){ background:url("[img4.jpg](https://postimg.cc/hh6pg86y)"); background-size:cover; } .row2 .item:nth-child(2){ background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg"); background-size:cover; } .row2 .item:nth-child(3){ background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg"); background-size:cover; } #txtArea{ width:60%; height:150px; } .last-footer-line{ width:100%; height:auto; margin-bottom:20px; } .dark{ filter:brightness(0.7); text-align:center; font-size:20px; line-height: 5em; } .flip-card { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; /* Remove this if you don't want the 3D effect */ } /* This container is needed to position the front and back side */ .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* Do an horizontal flip when you move the mouse over the flip box container */ .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } /* Position the front and back side */ .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } /* Style the front side (fallback if image is missing) */ .flip-card-front { background-color: #bbb; color: black; } /* Style the back side */ .flip-card-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); }
<!DOCTYPE html> <html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"/> <link rel="stylesheet" href="style.css"> <script src="js/tabs.js"></script> <head> <title>Test</title> </head> <body> <div class="Outside-Container"> <div class = "container"> <div class="top-logo-holder"> <img src ="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img"/> <div class="line"></div> </div> <div class="main-section"> <div class ="row1"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="flip"></div> </div> <div class="flip-card-back"> <h1>Coffee</h1> <h1>7.22$</h1> </div> </div> </div> <div class="item" id="item2"></div> <div class="item" id="item3"></div> </div> <div class ="row2"> <div class="item" id="item4"></div> <div class="item" id="item5"></div> <div class="item" id="item6"></div> </div> <div class="line"></div> <p>Your Order:</p> <textarea name="message" id="txtArea"></textarea> <p id="Total">Total: </p> </div> <div class="last-footer-line"> <button id="PlaceOrder">Place Order</button> <button id="ClearOrder">Clear Order</button> <div> </div> </div> </div> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="js/tabs.js"></script> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2020-03-17 21:14:37
$(function() { //declare prices and varaibles var item1 = $("#item1"); item1.val(7.99); var item2 = $("#item2"); item2.val(1.99); var item3 = $("#item3"); item3.val(9.99); var item4 = $("#item4"); item4.val(12.99); var item5 = $("#item5"); item5.val(17.99); var item6 = $("#item6"); item6.val(3.99); var Total = $("#Total"); var Amount = 0; //onclick var item = $(".item"); var txtArea = $("#txtArea"); var orderList = ""; //Events $('.flip-card-back').click(function() { var price = $('.flip-card-back .Item1_price').text().slice(0, -1); Amount += parseFloat(price); orderList += parseFloat(price) + "$ -item1 \\n"; txtArea.val(orderList); Total.html("Total: " + Amount.toFixed(2) + "$"); }); item.click(function(event) { Amount += parseFloat($(event.target).val()); orderList += parseFloat($(event.target).val()) + "$ -" + event.target.id + "\\n"; txtArea.val(orderList); Total.html("Total: " + Amount.toFixed(2) + "$"); }); //Events item.hover(function() { $(event.target).text($(event.target).val() + "$"); $(event.target).addClass("dark"); }, function() { $(event.target).text(""); $(event.target).removeClass("dark"); }); //Clear Button var ClearOrder = $("#ClearOrder"); //Events ClearOrder.click(function() { Amount = 0; Total.html("Total: " + Amount.toFixed(2)); orderList = ""; txtArea.val(orderList); }); })
* { box-sizing: border-box; font-family: "san-serif"; } body { margin: 0px; padding: 0px; } .Outside-Container { margin: 10px; position: absolute; border: 2px solid black; border-radius: 5%; width: 60%; height: auto; left: 20%; overflow: hidden; } .container { position: relative; width: 70%; height: auto; left: 15%; overflow: hidden; } .top-logo-holder { width: 100%; height: auto; } .logo-img { width: 31%; display: block; margin: 0 auto; } .line { height: 2px; width: 100%; position: relative; background: teal; border-radius: 25%; } .main-section { width: 100%; position: relative; height: auto; } .row1 { display: flex; flex-wrap: no-wrap; flex-direction: row; } .row2 { display: flex; flex-wrap: no-wrap; flex-direction: row; transition: 0.8s; } .item { width: 300px; height: 17vh; background: pink; margin: 5px; color: #fff; transition: 0.3s; font-size: 20px; cursor: pointer; } .row1 .item:nth-child(1) { background: url("https://i.postimg.cc/2yCtXwNn/img1.jpg"); background-size: cover; } .row1 .item:nth-child(2) { background: url("https://i.postimg.cc/vTXKRVGk/img2.jpg"); background-size: cover; } .row1 .item:nth-child(3) { background: url("https://i.postimg.cc/J7QvH9jx/img3.jpg"); background-size: cover; } .row2 .item:nth-child(1) { background: url("[img4.jpg](https://postimg.cc/hh6pg86y)"); background-size: cover; } .row2 .item:nth-child(2) { background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg"); background-size: cover; } .row2 .item:nth-child(3) { background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg"); background-size: cover; } #txtArea { width: 60%; height: 150px; } .last-footer-line { width: 100%; height: auto; margin-bottom: 20px; } .dark { filter: brightness(0.7); text-align: center; font-size: 20px; line-height: 5em; } .flip-card { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; /* Remove this if you don't want the 3D effect */ } /* This container is needed to position the front and back side */ .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* Do an horizontal flip when you move the mouse over the flip box container */ .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } /* Position the front and back side */ .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } /* Style the front side (fallback if image is missing) */ .flip-card-front { background-color: #bbb; color: black; } /* Style the back side */ .flip-card-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); }
<!DOCTYPE html> <html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css"> <script src="js/tabs.js"></script> <head> <title>Test</title> </head> <body> <div class="Outside-Container"> <div class="container"> <div class="top-logo-holder"> <img src="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img" /> <div class="line"></div> </div> <div class="main-section"> <div class="row1"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="flip"></div> </div> <div class="flip-card-back"> <h1>Coffee</h1> <h1 class='Item1_price'>7.22$</h1> </div> </div> </div> <div class="item" id="item2"></div> <div class="item" id="item3"></div> </div> <div class="row2"> <div class="item" id="item4"></div> <div class="item" id="item5"></div> <div class="item" id="item6"></div> </div> <div class="line"></div> <p>Your Order:</p> <textarea name="message" id="txtArea"></textarea> <p id="Total">Total: </p> </div> <div class="last-footer-line"> <button id="PlaceOrder">Place Order</button> <button id="ClearOrder">Clear Order</button> <div> </div> </div> </div> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="js/tabs.js"></script> </body> </html>
解决方案2
0 2020-03-17 20:30:37
我在悬停时为任何项目添加了旋转卡并将 item1 设置为第一项
item.mouseleave(function() { $('.flip-card-inner').removeClass('flipcard'); }); $('.flip-card-inner').addClass('flipcard');
添加了 css 类.flipcard { transform: rotateY(180deg); } .flipcard { transform: rotateY(180deg); }
还使用$('.flip-card-back').html($(event.target).val()+'$'); $('.flip-card-back').css('background', $(event.target).css('background'));添加了 img 和 price onhover 事件$('.flip-card-back').html($(event.target).val()+'$'); $('.flip-card-back').css('background', $(event.target).css('background')); $('.flip-card-back').html($(event.target).val()+'$'); $('.flip-card-back').css('background', $(event.target).css('background'));
.
这是你想要的吗😘
$(function() { //declare prices and varaibles var item1 = $("#item1"); item1.val(7.99); var item2 = $("#item2"); item2.val(1.99); var item3 = $("#item3"); item3.val(9.99); var item4 = $("#item4"); item4.val(12.99); var item5 = $("#item5"); item5.val(17.99); var item6 = $("#item6"); item6.val(3.99); var Total = $("#Total"); var Amount = 0; //onclick var item = $(".item"); var txtArea = $("#txtArea"); var orderList = ""; //Events item.hover(function(event) { $('.flip-card-back').html($(event.target).val() + '$'); $('.flip-card-back').css('background', $(event.target).css('background')); $('.flip-card-inner').addClass('flipcard'); }, function() { $('.flip-card-inner').removeClass('flipcard'); }); item.click(function(event) { Amount += parseFloat($(event.target).val()); orderList += parseFloat($(event.target).val()) + "$ -" + event.target.id + "\\n"; txtArea.val(orderList); Total.html("Total: " + Amount.toFixed(2) + "$"); }); //Events item.hover(function() { $(event.target).text($(event.target).val() + "$"); $(event.target).addClass("dark"); }, function() { $(event.target).text(""); $(event.target).removeClass("dark"); }); //Clear Button var ClearOrder = $("#ClearOrder"); //Events ClearOrder.click(function() { Amount = 0; Total.html("Total: " + Amount.toFixed(2)); orderList = ""; txtArea.val(orderList); }); })
* { box-sizing: border-box; font-family: "san-serif"; } body { margin: 0px; padding: 0px; } .Outside-Container { margin: 10px; position: absolute; border: 2px solid black; border-radius: 5%; width: 60%; height: auto; left: 20%; overflow: hidden; } .container { position: relative; width: 70%; height: auto; left: 15%; overflow: hidden; } .top-logo-holder { width: 100%; height: auto; } .logo-img { width: 31%; display: block; margin: 0 auto; } .line { height: 2px; width: 100%; position: relative; background: teal; border-radius: 25%; } .main-section { width: 100%; position: relative; height: auto; } .row1 { display: flex; flex-wrap: no-wrap; flex-direction: row; } .row2 { display: flex; flex-wrap: no-wrap; flex-direction: row; transition: 0.8s; } .item { width: 300px; height: 17vh; background: pink; margin: 5px; color: #fff; transition: 0.3s; font-size: 20px; cursor: pointer; } .row1 .item:nth-child(1) { background: url("https://i.postimg.cc/2yCtXwNn/img1.jpg"); background-size: cover; } .row1 .item:nth-child(2) { background: url("https://i.postimg.cc/vTXKRVGk/img2.jpg"); background-size: cover; } .row1 .item:nth-child(3) { background: url("https://i.postimg.cc/J7QvH9jx/img3.jpg"); background-size: cover; } .row2 .item:nth-child(1) { background: url("https://www.gourmesso.co.uk/blog/wp-content/uploads/sites/4/2017/03/Tiramisu-Coffee-in-a-Glass-Recipe-Italian-dessert-speciality.jpg"); background-size: cover; } .row2 .item:nth-child(2) { background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg"); background-size: cover; } .row2 .item:nth-child(3) { background: url("http://hopecoffeeco.com/wp-content/uploads/2017/01/Grid-home-item-show-img.jpg"); background-size: cover; } #txtArea { width: 60%; height: 150px; } .last-footer-line { width: 100%; height: auto; margin-bottom: 20px; } .dark { filter: brightness(0.7); text-align: center; font-size: 20px; line-height: 5em; } .flip-card { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; /* Remove this if you don't want the 3D effect */ } /* This container is needed to position the front and back side */ .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* Do an horizontal flip when you move the mouse over the flip box container */ .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flipcard { transform: rotateY(180deg); } /* Position the front and back side */ .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } /* Style the front side (fallback if image is missing) */ .flip-card-front { background-color: #bbb; color: black; } /* Style the back side */ .flip-card-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css"> <script src="js/tabs.js"></script> <head> <title>Test</title> </head> <body> <div class="Outside-Container"> <div class="container"> <div class="top-logo-holder"> <img src="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img" /> <div class="line"></div> </div> <div class="main-section"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="flip"></div> </div> <div class="flip-card-back"> <h1></h1> <h1></h1> </div> </div> </div> <div class="row1"> <div class="item" id="item1"></div> <div class="item" id="item2"></div> <div class="item" id="item3"></div> </div> <div class="row2"> <div class="item" id="item4"></div> <div class="item" id="item5"></div> <div class="item" id="item6"></div> </div> <div class="line"></div> <p>Your Order:</p> <textarea name="message" id="txtArea"></textarea> <p id="Total">Total: </p> </div> <div class="last-footer-line"> <button id="PlaceOrder">Place Order</button> <button id="ClearOrder">Clear Order</button> <div> </div> </div> </div> <script src="js/tabs.js"></script> </body> </html>
当我将鼠标悬停在spotfire可视化标题上时，有没有办法显示悬停/工具提示信息？
[英]Is there a way to show hover over /tool tip information when i mouse over on spotfire Visualization title?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.