第二个 Instagram 按钮的 CSS 属性

Question

Potion

Asked:2022-03-14 17:13:01 +0000 UTC2022-03-14 17:13:01 +0000 UTC 2022-03-14 17:13:01 +0000 UTC

单击鼠标左键需要一个图像元素，并且应该是一个表单元素

772

有一个具有内部逻辑的表单 - 当您将鼠标悬停在图像上时，文本会显示在其顶部。
这是通过<input type="image" onClick = this.form.submit>

问题是当您单击鼠标左键时，浏览器将此表单识别为图像，并且当您在新窗口中打开元素时，它会在此处打开图像。必须的形式）

如何解决？旧的逻辑也必须有效 - 当您将鼠标悬停在图像上时，一个元素会出现在它的顶部，当您单击图像时，会提交表单，但是当您单击带有鼠标右键，表单的浏览器菜单出来（在新窗口中打开），而不是图片（在新窗口中打开图片）

<div class="col-3" onmouseover="document.getElementById('@divID').style.display = 'block';" onmouseout="document.getElementById('@divID').style.display = 'none';">
  <form asp-action="AddComment" asp-controller="Comments" method="post" enctype="multipart/form-data">
    <div class="box maintxt">
      <input style="box-shadow: 1px 1px 5px black;" type="image" alt="Submit Form" src="https://previews.123rf.com/images/vera1703/vera17031811/vera1703181100083/114147510-two-green-strips-of-ram-for-a-computer-isolated.jpg" onclick="this.form.submit" class="img-fluid goodBoxShadow rounded" width="175" height="250">
      <div id="@divID" style="background-color: red; display: none; pointer-events: none;" class="overlay-text absFullSize">
        <div class="mh-100 overflow-hidden border-0 textFade" style="--gradient:linear-gradient(transparent 150px, red);">

          <div class="bootstrapp-card-body overflow-hidden border-0" style="background-color: red">

            <h11 class="text-left font-italic text-white shadowTextBlack">Текст который появлется при наведении мышкой</h11>

          </div>
        </div>
      </div>

    </div>
  </form>
</div>

稍后添加：为澄清起见，我在左侧附上一张图片 - 当你左键单击我的图片时会出现什么，在右侧 - 我需要什么。

3 个回答

Voted

Daniil Loban · Answer 1 · 2022-03-21T06:39:20Z

我认为您需要onContextMenu通过显示菜单来拦截事件并进一步处理它，这是一个代码示例，当onContextMenu我们获取id发生事件的元素以供进一步使用时（包括在上下文菜单中显示，就像我们之前所做的那样显示）。

  var menu = document.querySelector('.menu');
  var selectedId = ''; // переменная для id

  function showMenu(x, y){
    menu.style.left = `${x}px`;
    menu.style.top = `${y}px`;
    menu.classList.add('show-menu');
  }
  function hideMenu(){
    menu.classList.remove('show-menu');
  }
  function onContextMenu(e){
    // запоминаем id элемента на котором вызвали контекстное меню
    selectedId = e.target.id;
    e.preventDefault();
    showMenu(e.pageX, e.pageY);
    document.addEventListener('mousedown', onMouseDown, false);
  }
  function onMouseDown(e){
    if (e.target.id === "open-new-window"){
      alert("если выбрано меню открываем в новой вкладке");
      //window.open(`https://www.google.com/search?q=${selectedId}`); 
    }
    hideMenu();
    document.removeEventListener('mousedown', onMouseDown);
  }
  document.addEventListener('contextmenu', onContextMenu, false);

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    
.container{left:0;margin:auto;position:absolute;top:20%;width:100%;text-align:center}.menu{position:absolute;width:230px;padding:2px;margin:0;border:1px solid #bbb;background:#eee;background:-webkit-linear-gradient(to bottom,#fff 0,#e5e5e5 100px,#e5e5e5 100%);background:linear-gradient(to bottom,#fff 0,#e5e5e5 100px,#e5e5e5 100%);z-index:100;border-radius:3px;box-shadow:1px 1px 4px rgba(0,0,0,.2);opacity:0;-webkit-transform:translate(0,15px) scale(.95);transform:translate(0,15px) scale(.95);transition:transform .1s ease-out,opacity .1s ease-out;pointer-events:none}.menu-item{display:block;position:relative;margin:0;padding:0;white-space:nowrap}.menu-btn{background:0 0;line-height:normal;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:block;width:100%;color:#444;font-family:Roboto,sans-serif;font-size:13px;text-align:left;cursor:pointer;border:1px solid transparent;white-space:nowrap;padding:6px 8px;border-radius:3px}.menu-btn::-moz-focus-inner{border:0;padding:0}.menu-text{margin-left:25px}.menu-btn .fa{position:absolute;left:8px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.menu-item:hover>.menu-btn{color:#fff;outline:0;background-color:#2e3940;background:-webkit-linear-gradient(to bottom,#5d6d79,#2e3940);background:linear-gradient(to bottom,#5d6d79,#2e3940);border:1px solid #2e3940}.menu-item.disabled{opacity:.5;pointer-events:none}.menu-item.disabled .menu-btn{cursor:default}.menu .menu{top:4px;left:99%}.menu-item:hover>.menu,.show-menu{opacity:1;-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1);pointer-events:auto}.menu-item:hover>.menu{-webkit-transition-delay:.1s;transition-delay:.3s}

  </style>
</head>
<body>
<menu class="menu">
  <li class="menu-item">
    <button type="button" class="menu-btn">
      <span id="open-new-window" class="menu-text">Открыть в новой вкладке</span>
    </button>
  </li>
</menu>

<div class="col-3" onmouseover="document.getElementById('@divID').style.display = 'block';" onmouseout="document.getElementById('@divID').style.display = 'none';">
  <form asp-action="AddComment" asp-controller="Comments" method="post" enctype="multipart/form-data">
    <div class="box maintxt">
      <input id="oneID" oncontextmenu='return true;' style="box-shadow: 1px 1px 5px black;" type="image" alt="Submit Form" src="https://previews.123rf.com/images/vera1703/vera17031811/vera1703181100083/114147510-two-green-strips-of-ram-for-a-computer-isolated.jpg" onclick="this.form.submit" class="img-fluid goodBoxShadow rounded" width="175" height="250">
      <div id="@divID" style="background-color: red; display: none; pointer-events: none;" class="overlay-text absFullSize">
        <div class="mh-100 overflow-hidden border-0 textFade" style="--gradient:linear-gradient(transparent 150px, red);">
          <div class="bootstrapp-card-body overflow-hidden border-0" style="background-color: red">
            <h11 class="text-left font-italic text-white shadowTextBlack">Текст который появлется при наведении мышкой</h11>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
</body>
</html>

没有菜单创建：

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title></title>

</head>
<body>
<div class="col-3">
  <form asp-action="AddComment" asp-controller="Comments" method="post" enctype="multipart/form-data">
    <div class="box maintxt">
      <a href="https://google.com" onmouseover="document.getElementById('@divID').style.display = 'block';" onmouseout="document.getElementById('@divID').style.display = 'none';">
      <input id="oneID" oncontextmenu='return true;' style="box-shadow: 1px 1px 5px black;" type="image" alt="Submit Form" src="https://previews.123rf.com/images/vera1703/vera17031811/vera1703181100083/114147510-two-green-strips-of-ram-for-a-computer-isolated.jpg" onclick="this.form.submit" class="img-fluid goodBoxShadow rounded" width="175" height="250">
      </a>
      <div id="@divID" style="background-color: red; display: none; pointer-events: none;" class="overlay-text absFullSize">
        <div class="mh-100 overflow-hidden border-0 textFade" style="--gradient:linear-gradient(transparent 150px, red);">
          <div class="bootstrapp-card-body overflow-hidden border-0" style="background-color: red">
            <h11 class="text-left font-italic text-white shadowTextBlack">Текст который появлется при наведении мышкой</h11>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

</body>
</html>

Артем · Answer 2 · 2022-03-22T01:37:00Z

Артем

2022-03-22T01:37:00Z2022-03-22T01:37:00Z

这就是你可以做到的..
使用position: absolute; 和 *z-index: ** ;
对于链接的位置，您可以放置所需的任何内容。
底线是层会有重叠。当你点击图片时，它实际上会被另一层覆盖。z-index上哪个更高：1 或 2...；
好吧，每个有重叠的元素（元素 a，form 的组合）都简单地包装在一个单独的盒子中，其他的以相同的方式包装，然后我们根据需要定位这些盒子。

.moto {
  background-size: cover;
  position: absolute;
  z-index: 0;
  width: 200px;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  z-index: 1;
  cursor: auto;
}

<a href="#" class="box"></a>
<form action="">
    <img class="moto" src="https://sun9-14.userapi.com/fYL5s_GDK8mAx7ehR7TLtvD8VwQmnQq1Q5JiLg/XQiUfIWNup8.jpg" alt="">
</form>

1

Locker · Answer 3 · 2022-03-22T01:46:21Z

这是在新选项卡中打开链接的菜单上下文

<div class="col-3" onmouseover="document.getElementById('@divID').style.display = 'block';" onmouseout="document.getElementById('@divID').style.display = 'none';">
  <form asp-action="AddComment" asp-controller="Comments" method="post" enctype="multipart/form-data">
    <div class="box maintxt">

<!--> Добавил ссылку <-->
<!--> В атрибуте href укажите ссылку которая вас интересует. <-->
      <a href="https://u.to/kXMrGw">
<input style="box-shadow: 1px 1px 5px black;" type="image" alt="Submit Form" src="https://previews.123rf.com/images/vera1703/vera17031811/vera1703181100083/114147510-two-green-strips-of-ram-for-a-computer-isolated.jpg" onclick="this.form.submit" class="img-fluid goodBoxShadow rounded" width="175" height="250">
</a>
      <div id="@divID" style="background-color: red; display: none; pointer-events: none;" class="overlay-text absFullSize">
        <div class="mh-100 overflow-hidden border-0 textFade" style="--gradient:linear-gradient(transparent 150px, red);">

          <div class="bootstrapp-card-body overflow-hidden border-0" style="background-color: red">

            <h11 class="text-left font-italic text-white shadowTextBlack">Текст который появлется при наведении мышкой</h11>

          </div>
        </div>
      </div>

    </div>
  </form>
</div>

单击鼠标左键需要一个图像元素，并且应该是一个表单元素

表格填充不起作用

提示 50/50，有两个，其中一个是正确的

在 PyQt5 中停止进程

我的脚本不工作

在文本文件中写入和读取列表

如何像屏幕截图中那样并排排列这些块？

确定文本文件中每一行的字符数

将接口对象传递给 JAVA 构造函数

正确更新数据库中的数据

Python解析不是css

单击鼠标左键需要一个图像元素，并且应该是一个表单元素

3 个回答

相关问题