Net Framework, Office 365, C#, WPF, ASP.Net, Visual Studio, Programmiersprachen PC, C# Programmieren, vba, SQL Server, free source code snippets Antivirus free
#

 

 

Ich benötige für meine Asp Anwendung in der Ausgabe Seite in HTML ein Curosor verhalten, bei dem man wenn man mit der Maus über einen Textblock fährt,

der Textblock farblich aktiv angezeigt wird und link-aktiv ist.

 

Aktiver Link-DIV:Hover Block

 

Css-Class erstellen

Wenn man einen Div Hover Block benötigt,

dann muss man vor dem eigentliche DIV Tag einen Style-Block erstellen, in welche man eine CSS Klasse definiert.

Mit .Punkt beginnend bedeutet, dass es als class="" für folgende HTML Elemente zur Verfügung steht

Der Teil :hover bedeutet, dass das Verhalten aktiv wird, wenn man mit der Maus über das entspechende HTML Element fährt. Bei einem DIV-Block ist der komplette Panel-Bereich betroffen.

.div-hover:hover{background-color:rgb(182, 255, 0) ;}

 

Jetzt muss man nur noch die Klasse in dem zu verwendenden DIV-Tag einfügen

<Div class="div-hover" >

 

<style>

   .div-hover:hover{background-color:rgb(182, 255, 0) ;}       

</style>

 

<a href="~/Notes/Details123" >

    <Div class="div-hover" >

       text

    </Div>

</a>

 

 

 

 

 

 

Html Razor Seite

In HTML Asp Net Core MVC View

@model IEnumerable<IWois_Core.Models.Notes_Index_DataModel>

 

@{

    ViewData["Title"] = "Blog Notes";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

<table class="table">

    <tr>

        <td style="vertical-align:bottom;">

            <a href="~/Notes/Create" title="Create a Note, Letter, Document" style="font-size:large ">

                + Notiz schreiben..

            </a>

        </td>

    </tr>

</table>

 

 

@*------< Loop: Details >--------*@

@foreach (var item in Model)

{

    <br />

    @*----< row >----*@

 

    <style>

        .div-hover:hover{background-color:rgb(182, 255, 0) ;}       

    </style>

 

       

    <a href="~/Notes/Details/@item.Note.IDNote" title="@Html.DisplayFor(modelItem => item.Note.DtCreated): @Html.DisplayFor(modelItem => item.Note.Title)">

 

        <Div class="div-hover" style="width:90%; display: block;   padding: 12px;    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.1);

            transition: box-shadow 3s ease-in-out; border-radius: 4px; outline: none;">

            <table>

                <tr>

                    <td style="width:100px;vertical-align:top;">

                        @*---< Left >----*@

                        <table>

                            <tr>

                                <td style="text-align:left;font-size: 12px; color: #757575;">

 

                                    @Html.DisplayFor(modelItem => item.Note.DtCreated)

                                </td>

                                <td style="text-align:left;font-size: 12px; color: #757575;">

                                    @Html.DisplayFor(modelItem => item.Sum_Views)

 

                                </td>

                            </tr>

                        </table>

                        @*---</ Left >----*@

                    </td>

 

                    <td style="width:auto;text-align:center ">

                        @*---< right >----*@

                        <table style="width:100%">

                            <tr>

                                <td style="text-align:left;font-size:large;">

                                    @Html.DisplayFor(modelItem => item.Note.Title)

                                </td>

                            </tr>

                            <tr>

                                <td style="text-align:left;font-size: 12px; color: #757575;">

 

                                    @Html.DisplayFor(modelItem => item.Note.Text)

 

                                </td>

                            </tr>

                        </table>

                        @*---< right >----*@

                    </td>

 

                </tr>

            </table>

        </Div>

        </a>

        @*----</ row >----*@

        }

        @*------</ Loop: Details >--------*@

 

 

 

Mobile
»
HTML: Position eines Elements nur bis zu einer bestimmten Position verschieben
»
jQuery Beispiel: Text in Zahl umwandeln, Image tauschen
»
Wie kann man mit einem Button von einer Webseite etwas in die Zwischenablage kopieren?
»
wie bekommt man die URL der aktuellen Webseite
»
Javascript: Abfrage Dialog OK Abbrechen
»
Javascript: Kommentare entfernen
»
HTML Flexgrid Flex Wrap
»
Wie erstellt man eine Div-Hover Block
»
HTML after::
»
HTML: was bedeutet Aria-hidden true

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Raimund.Popp@Microsoft-Programmierer.de